読者です 読者をやめる 読者になる 読者になる

おまじないの綴り方

spelling of a logical spell

マウスの位置によって表示位置を変えるツールチップをjsとCSSで実装する

目標

f:id:miyatsuki_yatsuki:20170325174822g:plain

前フリ

spell-spell.hatenablog.com

spell-spell.hatenablog.com

考え方

  • 画面内のマウスの位置に応じてツールチップの表示位置を変える
  • マウスが画面左上よりにいたら、ツールチップは右下方向へ、左下なら右上へといったように変えていく

コード

<html>
  <style>

  <!--ツールチップの見た目-->
  span#tooltip{
    position: absolute;   <!--座標で表示位置を直接コントロールできるようにする-->
    z-index: 10; <!--他の要素より前に表示されるように-->
    visibility: hidden; <!--最初は隠しておく-->
    padding: 0 5px;
    background-color: #FFF;
  }

 <!--ツールチップを表示させる部分の見た目。わかればなんでもいい-->
  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

<html>
  <style>
  span#tooltip{
    position: absolute;
    z-index: 10;
    visibility: hidden;
    padding: 0 5px;
    background-color: #FFF;
  }

  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

  <body>
    <span id="tooltip">hoge</span>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>
    <br>
    <br>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>

    <script type="text/javascript">
      function over()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "visible";
      }

      function out()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "hidden";
      }

      function move(){
        var tooltip = document.getElementById("tooltip")

        //前々回のバージョン:特にマウス位置は考慮しない
        //var xPos = event.pageX + 10; 
        //var yPos = event.pageY - 10;

        //前回のバージョン:ツールチップが隠れてしまわないように適切な座標を選択する
        var xPos = Math.min(event.pageX + 10, window.pageXOffset + window.innerWidth - tooltip.getBoundingClientRect().width - 10);
        var yPos = Math.min(event.pageY - 20, window.pageYOffset + window.innerHeight - tooltip.getBoundingClientRect().height -20);

        var xPos = 0;
        if(event.pageX < window.innerWidth/2) //マウスカーソル位置が画面の左半分側かどうか
        {
          xPos = event.pageX + 10; //左半分にいたらカーソル位置の右側にツールチップを表示
        }
        else
        {
          xPos = event.pageX - tooltip.getBoundingClientRect().width - 10; //右側にいたらカーソルの右側にツールチップを表示
        }

        var yPos = 0;
        if(event.pageY < window.innerHeight/2) //マウスカーソル位置が画面の上半分かどうか
        {
          yPos = event.pageY + 10 //上半分にいたらカーソル位置の下にツールチップを表示
        }
        else
        {
          yPos = event.pageY - tooltip.getBoundingClientRect().height - 10; //下半分にいたらカーソル位置の上にツールチップを表示
        }


        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

ツールチップの内容が、画面サイズに対して一定以上大きい場合、結局ツールチップが隠れたり、重なってしまったりする問題は起きうる

ただ、これ以上はツールチップの位置よりも中身や表示サイズなどを工夫したほうが良さそう

画面の端に来ても隠れないツールチップをjsとCSSで実装する

目標

f:id:miyatsuki_yatsuki:20170325170817g:plain

前フリ

spell-spell.hatenablog.com

考え方

  • マウスが特定の位置より下(右)までいったら、ツールチップがそれより下(右)まで行かないようにする
    • 具体的は window.pageYOffset + window.innerHeight - getBoundingClientRect().height と マウスのy座標を比較し、より小さい方(=上にある方)をツールチップのy座標として使用する
    • x座標について考える場合はy→x, height→widthにする

f:id:miyatsuki_yatsuki:20170325171211p:plain

コード

<html>
  <style>

  <!--ツールチップの見た目-->
  span#tooltip{
    position: absolute;   <!--座標で表示位置を直接コントロールできるようにする-->
    z-index: 10; <!--他の要素より前に表示されるように-->
    visibility: hidden; <!--最初は隠しておく-->
    padding: 0 5px;
    background-color: #FFF;
  }

 <!--ツールチップを表示させる部分の見た目。わかればなんでもいい-->
  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

<html>
  <style>
  span#tooltip{
    position: absolute;
    z-index: 10;
    visibility: hidden;
    padding: 0 5px;
    background-color: #FFF;
  }

  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

  <body>
    <span id="tooltip">hoge</span>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>
    <br>
    <br>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>

    <script type="text/javascript">
      function over()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "visible";
      }

      function out()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "hidden";
      }

      function move(){
        var tooltip = document.getElementById("tooltip")

        //前のバージョン
        //var xPos = event.pageX + 10; 
        //var yPos = event.pageY - 10;

        //上で説明したように、ツールチップが隠れてしまわないように適切な座標を選択する
        var xPos = Math.min(event.pageX + 10, window.pageXOffset + window.innerWidth - tooltip.getBoundingClientRect().width - 10);
        var yPos = Math.min(event.pageY - 20, window.pageYOffset + window.innerHeight - tooltip.getBoundingClientRect().height -20);

        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

右端にマウスを寄せると、ツールチップにマウスが乗ってしまい悲しい感じになる

f:id:miyatsuki_yatsuki:20170325172513g:plain

javascript + CSS でツールチップ機能を実装する

目標

javascript + CSSツールチップ機能を実装する

f:id:miyatsuki_yatsuki:20170318212002g:plain

コード

<html>
  <style>

  <!--ツールチップの見た目-->
  span#tooltip{
    position: absolute;   <!--座標で表示位置を直接コントロールできるようにする-->
    z-index: 10; <!--他の要素より前に表示されるように-->
    visibility: hidden; <!--最初は隠しておく-->
    padding: 0 5px;
    background-color: #FFF;
  }

 <!--ツールチップを表示させる部分の見た目。わかればなんでもいい-->
  div {
    background: #abcdef;
    width:300px;
    height:300px;
  }
  </style>

  <body>
  <!--ツールチップとdiv要素をそれぞれhtmlで書いておく-->
  <!--div要素はマウス移動時のイベントを呼び出すようにしておく-->

    <span id="tooltip">hoge</span>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>
    <br>
    <br>
    <div onmousemove="move()" onmouseover="over()" onmouseout="out()"></div>

    <script type="text/javascript">

   //マウスがdiv要素に乗ったらツールチップのvisibilityをvisibleにして表示する
      function over()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "visible";
      }

   //マウスがdiv要素から外れたらツールチップのvisibilityをhiddenにして非表示にする
      function out()
      {
        var tooltip = document.getElementById("tooltip");
        tooltip.style.visibility = "hidden";
      }

   //マウスがdiv要素の上で移動されたときツールチップの座標と表示内容を書き換える
      function move(){
        var tooltip = document.getElementById("tooltip")

        //event.pageX, pageYでマウスの位置を取得
        var xPos = event.pageX + 10;
        var yPos = event.pageY - 10;

        //ツールチップのスタイルのtopとleftを書き換えて、ツールチップを移動させる
        tooltip.style.top = yPos + "px";
        tooltip.style.left = xPos + "px";
        tooltip.innerHTML = "xPos:" + xPos + "<br/>" + "yPos:" + yPos;
      }
    </script>
  </body>
</html>

問題点

ウィンドウの端っこの方にマウスがいくと、ツールチップが隠れて悲しい マウスが下の方にいったら、それを考慮してツールチップを高い位置に表示して欲しい

f:id:miyatsuki_yatsuki:20170318213016g:plain

参考記事

blog.qaramell.com

CSSのanimationで文字を点滅させるサンプル

目標

f:id:miyatsuki_yatsuki:20170318195726g:plain

コード

<html>
  <style>
  .blink {
    animation-name: flash; <!--CSS側で定義したアニメーションの名前-->
    animation-duration: 1s; <!--アニメーションの長さ-->
    animation-iteration-count: infinite; <!--アニメーションを何回実行するか, infiniteだと無限ループ-->
    animation-direction: alternate; <!--alternateにすると、行って帰ってという風にアニメーションを実行する-->
    animation-play-state: running; <!--アニメーションを実行中の状態にする-->
  }

 <!--全体の何%進んだところで要素をどうするかの指定。今回は不透明度を0にする-->
  @keyframes flash {
    50%{
        opacity: 0;
    }
  }
  </style>

  <body>
    <span class="blink">hoge</span>
  </body>
</html>

参考記事

qiita.com

qiita.com

d3.jsで書いたグラフの軸を反転させるサンプル

目標

d3.jsで作成した散布図のy軸を反転させたい f:id:miyatsuki_yatsuki:20170307010526p:plain

まとめ

domain()の指定を逆にする

環境

d3.js 4.6.0

関連ページ

そもそもd3.jsでグラフを出す方法(棒グラフ) spell-spell.hatenablog.com

コード

<html>
<head>
  <script type="text/javascript" src="d3.js"></script>
</head>

<body>
  <!-- グラフを描画するためのsvg要素を作っておく -->
  <svg id="scatter" width="500" height="500"></svg>

  <script type="text/javascript">
  //グラフのサイズを指定
  var width = 500 
  var height = 500

  var dataSet = []; //グラフの各軸の値を設定
  for (var i = 0; i < 10; i++)
  {
    dataSet.push({"x": Math.random(), "y": Math.random()})
  }

  //文字が切れないようにマージンを指定
  var margin = 40

  //x軸に対してdomain[0, 1]で左が小さくなる
  //marginの範囲内に収まるようにrangeRoundで調節
  var x = d3.scaleLinear().domain([0, 1]).rangeRound([0, width-margin*2]);

  //y軸に対してdomain[1, 0]で下が小さくなる
  //marginの範囲内に収まるようにrangeRoundで調節  
  var y = d3.scaleLinear().domain([1, 0]).rangeRound([0, height-margin*2]);

  //描画したいSVG要素を取得
  var element = document.getElementById("scatter")

  //散布図の○を生成する
  d3.select(element).selectAll("circle")
    .data(dataSet)
    .enter()
    .append("circle")

  //散布図の○を適切な位置に置く
  d3.select(element).selectAll("circle")
    .attr("class", "data")
    .attr("cx", function(d){return x(d["x"]) + margin})
    .attr("cy", function(d){return y(d["y"]) + margin})
    .attr("r", function(d){return 5})
    .attr("fill", "#6fbadd")

  //x軸を作る
  d3.select(element).append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(" + margin + "," + (height-margin) + ")")
    .call(d3.axisBottom(x));

  //y軸を作る
  d3.select(element).append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(" + margin + "," + margin + ")")
    .call(d3.axisLeft(y));

</script>

</body>

</html>

複数のdiv要素の高さを揃えるときのサンプル

目標

divの高さを揃えたい f:id:miyatsuki_yatsuki:20170306003347p:plain

まとめ

getBoundingClientRect() で要素のx,y,width,heightが取得できる

コード

<html>

<!-- 文字を折り返すようにして結果をわかりやすく -->
<style> 
  div {
    word-wrap: break-word;
    width:200px;
    border: 1px solid;
  }
</style>

<body>
  <!-- 左側のdiv要素, ここでheightを指定していないので高さは動的に決まる -->
  <div style="float:left;">
    <div class="upper">あいうえおかきくけこさしすせそなにぬねの</div>
    <div class="lower">1234567890ABCDEFG</div>
  </div>

  <!-- 右側のdiv要素 -->
  <div style="float:left;">
    <div class="upper">あいうえおかきくけこ</div>
    <div class="lower">1234567890ABCDEFG</div>
  </div>

  <script>
    //高さを揃えたい要素を取得
    var nodes = document.getElementsByClassName("upper")
    var height = 0

    //各要素の高さを取得
    for(var i = 0; i < nodes.length; i++)
    {
      if(height < nodes[i].getBoundingClientRect().height)
        height = nodes[i].getBoundingClientRect().height
    }

    //一番高いやつに高さを合わせる
    for(var i = 0; i < nodes.length; i++)
    {
      nodes[i].style.height = height
    }
  </script>
</body>

</html>

d3.jsで棒グラフを書くときのサンプル

目標

下のような棒グラフをd3.jsを使って書く f:id:miyatsuki_yatsuki:20170226043919p:plain:w600

環境

d3.js 4.6.0

特記事項

全般

  • highcharts.jsなどのライブラリと比較すると考え方がかなり違うので、移行の際は注意
    • グラフを描画するためのライブラリではない
    • いい感じの見た目で描画されるようにDOMを置いてくれるライブラリというイメージ
    • そのため見た目のカスタマイズ時はAPIだけでなくCSSをいじって解決することも可能

バージョン

  • d3.jsがバージョン3と4でAPIがかなり変わっているので、調べるときはバージョンに注意が必要
  • 例えば、以下の記述はv4では使えない(が、割と見かける)
    //エラーも出ない
    .attr({
        x : function(d, i) { return i}
        y : function(d){ return d },
    }); 

  
  //こちらはエラーは出る
  d3.scale.linear()

コード

<html>
<head>
  <script type="text/javascript" src="d3.js"></script>
</head>

<body>
  <!-- グラフを描画するためのsvg要素を作っておく -->
  <svg id="bar" width="500" height="300"></svg>

  <script type="text/javascript">
  width = 500;
  height = 300;
  elementName = "#bar" //作っておいたsvg要素の名前

  var dataSet = []; //棒グラフの各項目の値
  var dataLabel = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]; //棒グラフの各項目の名前

  for (var i = 0; i < 10; i++)
  {
    dataSet.push(Math.random())
  }

  //グラフの各値をいい感じのwidthにするための変換関数
  var x = d3.scaleLinear() //配列の中身が数字 かつ 線形なグラフのとき
  .domain([0, 1]) //グラフがとりうる値の範囲
  .rangeRound([20, width-10])
  //実際の長さとしての範囲をいくつからいくつにするか。マージンをどの程度取りたいかの指定として使える。

  //グラフのラベル数にもとづいて、項目間の幅をいい感じにするための変換関数
  var y = d3
  .scaleBand() //配列の中身がラベルのとき
  .domain(dataLabel) //配列をそのまま渡す
  .rangeRound([20, height]); //実際の長さとしての範囲をいくつからいくつにするか

  //xとyは軸の描画でも使う

  //グラフ用のsvg要素に棒グラフの「棒(rect)」を追加する
  d3
  .select(elementName) // svg要素を指定
  .selectAll('rect') // その中のrect要素を抽出(なければ空オブジェクトが返ってくる)
  .data(dataSet) // 描画元のデータを指定
  .enter() // selectAllで足りない分の要素を確保する
  .append('rect'); //確保した要素にrectとして追加する

  //棒グラフの「棒」の部分の描画
  d3.select(elementName).selectAll('rect') //svg要素の中のrect要素をすべて選択(さっき作ったもの)
  .attr("class", "bar") //棒グラフであることを明示(必須ではない)
  .attr("x", function(d){return x(0)})
  //各値のx座標を指定。左端にしたいので0にする。
  //ここで、x関数をかませることで、マージンを考慮した「左端」が指定できる
  .attr("y", function(d, i){return y(dataLabel[i])})
  //各要素のy座標をy関数を使って指定。y関数はdataLabel内の要素に紐付いているので、y(dataLabel)の形式になる。
  //iはdataSetの何番目の要素を参照しているかが入る
  .attr("height", 15)
  //各棒の縦の長さ(今回は棒の幅)
  .attr("width", function(d){return x(d)})
  //各棒の横の長さ(今回は棒の長さ)
  //dはdataSetの値そのものが入る。x関数を噛ませて長さを指定。
  .attr("fill", "#6fbadd")
  //棒の色

  //棒グラフのx軸の描画
  d3.select(elementName) //グラフ用のsvg要素を持ってくる
  .append("g") //軸描画用の要素を追加(gという名前じゃないと動かない)
  .attr("class", "axis axis--x") //x軸用の要素を追加
  .attr("transform", "translate(0, 20)") //(0,20)の位置を起点として描画
  .call(d3.axisTop(x)); //上に軸が出るように設定

 //棒グラフのy軸の描画
  d3.select(elementName) //グラフ用のsvg要素を持ってくる
  .append("g") //軸描画用の要素を追加(gという名前じゃないと動かない)
  .attr("class", "axis axis--y") //y軸用の要素を追加
  .attr("transform", "translate(20, 0)") //(20,0)の位置を起点として描画
  .call(d3.axisLeft(y)); //左に軸が出るように設定

</script>

</body>

</html>