D3.js - 続けたい日記

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

作者: 古籏一浩
出版社/メーカー: SBクリエイティブ株式会社
発売日: 2014/07/01
メディア: Kindle版
この商品を含むブログを見る

付録鶏頭図まで。けいとうずって変換できなかった。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <script src="../node_modules/d3/d3.min.js" charset="utf-8"></script>
    <style media="screen">
      .label { font-size: 14px; text-anchor: middle; }
      .pie { stroke: white; stroke-width: 1px; opacity: 0.4; }
      svg { width: 320px; height: 320px; border: 1px solid black; background-color: #fff; }
    </style>
  </head>
  <body>
    <h1>鶏頭図</h1>
    <svg id="myGraph"></svg>
    <script src="./sample_ex4.js" charset="utf-8"></script>
  </body>
</html>

var svgEle = document.getElementById("myGraph");
var svgWidth = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("width"));
var svgHeight = parseFloat(window.getComputedStyle(svgEle, null).getPropertyValue("height"));

var dataset = [
  { location: "校庭", value: 90 },
  { location: "自宅", value: 35 },
  { location: "校舎", value: 70 },
  { location: "田畑など", value: 25 },
  { location: "その他", value: 60 }
];

var iRadius = 50;
var oRadius = iRadius + 10;
var colors = d3.scale.category10();

// 鶏頭図の1つの扇形の割当角度を計算する（360ドをデータ数で除算）
for (var i = 0; i < dataset.length; i++) {
  dataset[i].startAngle = (360 / dataset.length) * i * Math.PI / 180;
  dataset[i].endAngle = (360 / dataset.length) * (i + 1) * Math.PI / 180;
}

// 鶏頭図の円のサイズ
var arc = d3.svg.arc()
  .innerRadius(iRadius)
  .outerRadius(function(d) { return oRadius + d.value; });


// 鶏頭図を描画
d3.select("#myGraph")
  .selectAll("path")
  .data(dataset)
  .enter()
  .append("path")
  .attr("class", "pie")
  .attr("d", arc)
  .attr("fill", function(d, i) {
    return colors(i);
  })
  .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")");

 d3.select("#myGraph")
  .selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
  .attr("class", "label")
  .attr("transform", function(d, i) {
    var c = arc.centroid(d);
    var x = c[0] + svgWidth / 2;
    var y = c[1] + svgHeight / 2;
    return "translate(" + x + ", " + y + ")";
  })
  .text(function(d, i) {
    return d.location + "(" + d.value + ")";
  });

f:id:yossk:20150623212716j:plain