D3.js - 続けたい日記

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

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

付録フォースレイアウト。最初、なにも表示されないなぁ？と思ったが、表示された瞬間にどこかにすっ飛んでいってるようだ。何が悪いのだろう。gravity の値を一桁落としてみたけど、違うなぁ・・・。

<!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">
      .forceLine { stroke: red; stroke-width: 5; }
      svg { width: 320px; height: 320px; border: 1px solid black; background-color: #fff; }
    </style>
  </head>
  <body>
    <h1>フォースレイアウト</h1>
    <svg id="myGraph"></svg>
    <script src="./sample_ex1.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 = {
  nodes: [
    { name: "Apple" },
    { name: "Google" },
    { name: "Amazon" },
    { name: "Microsoft" }
  ],
  links: [
    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 2, target: 3 },
    { source: 3, target: 0 }
  ]
};

var force = d3.layout.force()
  .nodes(dataset.nodes)
  .links(dataset.links)
  .size([svgWidth, svgHeight])
  .linkDistance(90)
  .linkStrength(5)
  .gravity(0.00001)
  .start();

var link = d3.select("#myGraph")
  .selectAll("line")
  .data(dataset.links)
  .enter()
  .append("line")
  .attr("class", "forceLine");

var node = d3.select("#myGraph")
  .selectAll("circle")
  .data(dataset.nodes)
  .enter()
  .append("circle")
  .attr("r", 10)
  .call(force.drag);

force.on("tick", function() {
  link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

  node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
});

f:id:yossk:20150620115856j:plain