D3.js

JavaScript D3.js

データビジュアライゼーションのためのD3.js徹底入門　Webで魅せるグラフ＆チャートの作り方

データビジュアライゼーションのためのD3.js徹底入門　Webで魅せるグラフ＆チャートの作り方

第4章 D3.js から SVG を操作する、まで。 同じ要素に対して、時間差でアニメーションさせようとしたけどうまくいかなかった。 あとで定義した方が優先されるようだ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SVG</title>

    <link href="../node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../node_modules/octicons/octicons/octicons.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style media="screen">
      svg { width: 320px; height: 240px; border: 1px solid; }
      rect { fill: orange; }
      .bar { fill: orange; }
      .bar_note { fill: red; }
    </style>
  </head>
  <body>
    <script src="../node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>

    <div class="container">
      <h1>D3.js によるスタイルの操作</h1>

      <div class="row">
        <div class="col-sm-4 text-center">
          <div id="myGraph"></div>
        </div>
        <div class="col-sm-4 text-center">
          <svg>
            <rect id="myBar" x="0" y="50" width="100" height="25" />
          </svg>
        </div>
        <div class="col-sm-4 text-center">
          <svg>
            <rect class="bar" x="0" y="10" width="60" height="25" />
            <rect class="bar" x="0" y="50" width="100" height="25" />
            <rect class="bar" x="0" y="90" width="160" height="25" />
            <rect class="bar" x="0" y="130" width="220" height="25" />
          </svg>
        </div>
      </div>
      <script src="sample4_1.js" charset="utf-8"></script>
    </div>
  </body>
</html>

var svg1 = d3.select("#myGraph").append("svg");

svg1.append("rect")
  .attr("x", "10px")
  .attr("y", "50px")
  .attr("width", "200px")
  .attr("height", "30px");

d3.select("#myBar")
  .attr("x", "10px")
  .attr("y", "50px")
  .attr("width", "200px")
  .attr("height", "30px")
  .transition()
  .duration(3000)
  .attr("width", "50px")
  .style("fill", "red")
  .style("stroke", "black");

d3.select(".bar")
  .attr("class", "bar_note")
  .transition()
  .duration(1000)
  .attr("width", "300px")
  .style("fill", "blue");
// attr で style 指定すると、transition が効かず、即効で反映される
//  .attr("style", "fill: blue; stroke: red;");

d3.selectAll(".bar")
  .transition()
  .duration(1000)
  .style("stroke", "black")
  .style("fill", function(d, i) {
    if (i == 2) {
      return "cyan";
    } else {
      return "red";
    }
  });

f:id:yossk:20150604225052j:plain