D3.js

D3.js JavaScript

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

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

第6章 データの更新・追加・削除 まで。 このあたりよくわかってないと、データが更新されない！と焦りそう。

<!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; }
      .bar { fill: orange; }
    </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>データに応じてグラフを表示</h1>
      <div class="row">
        <div class="col-sm-12">
          <button data-src="sample6/mydata1.csv" class="btn btn-primary">mydata1.csv を読み込み</button>
          <button data-src="sample6/mydata2.csv" class="btn btn-info">mydata2.csv を読み込み</button>
          <button data-src="sample6/mydata3.csv" class="btn btn-warning">mydata3.csv を読み込み</button>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <svg id="myGraph1"></svg>
        </div>
        <div class="col-sm-4">
        </div>
        <div class="col-sm-4">
        </div>
      </div>
      <script src="sample6.js" charset="utf-8"></script>
    </div>
  </body>
</html>

d3.selectAll("button").on("click", function() {
  var csvfile = this.getAttribute("data-src");

  d3.csv(csvfile, function(error, data) {
    var dataset = [];
    var barElements;

    for (var i = 0; i < data.length; i++) {
      dataset.push(data[i]["商品A"]);
    }

    barElements = d3.select("#myGraph1")
      .selectAll("rect")
      .data(dataset);

    barElements.enter()
      .append("rect")
      .attr("class", "bar")
      .attr("width", function(d, i) {
        return d;
      })
      .attr("height", 20)
      .attr("x", 0)
      .attr("y", function(d, i) {
        return i * 25;
      });

    barElements.attr("width", function(d, i) {
      return d;
    });

    barElements.exit().remove();
  });
});

f:id:yossk:20150606213802j:plain