18、D3数据可视化：从图形构建到测试驱动开发

D3数据可视化：从图形构建到测试驱动开发

1. 构建力导向图

1.1 准备工作

打开本地浏览器中的文件： https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter11/force-directed-graph.html 。

1.2 代码实现

以下是将flare数据集可视化为力导向树的代码：

<script type="text/javascript">
    var w = 1280,
        h = 800,
        z = d3.scale.category20c();
    var force = d3.layout.force()
        .size([w, h]);
    var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);
    d3.json("/data/flare.json", function(root) {
      var nodes = flatten(root),
          links = d3.layout.tree().links(nodes); // &l