18、D3数据可视化：力导向图、地图投影与单元测试

D3数据可视化：力导向图、地图投影与单元测试

1. 构建力导向图

力导向图是D3力布局的经典应用。下面将展示如何实现一个力导向图，将分层的flare数据集可视化为力导向树。

1.1 准备工作

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

1.2 实现步骤

以下是实现代码：

<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); // <-B
      force
          .nodes(nodes)