18、D3数据可视化实战：从图形绘制到测试驱动

mac99

于 2025-11-30 15:39:32 发布

阅读量26

点赞数

CC 4.0 BY-SA版权

分类专栏： D3.js可视化艺术文章标签： D3 数据可视化力导向图

本文链接：https://blog.youkuaiyun.com/mac99/article/details/155451337

D3.js可视化艺术专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

D3数据可视化实战：从图形绘制到测试驱动

1. 构建力导向图

力导向图是D3力布局的经典应用。下面详细介绍如何实现一个力导向图。

1.1 准备工作

在Web浏览器中打开本地副本文件：

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