15、D3 数据可视化：布局与交互实现

鸽子精Pro

于 2025-11-16 10:26:21 发布

阅读量11

点赞数

CC 4.0 BY-SA版权

分类专栏： D3.js实战指南文章标签： D3 数据可视化树状图

本文链接：https://blog.youkuaiyun.com/pytorch8learner/article/details/155040807

D3.js实战指南专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

D3 数据可视化：布局与交互实现

在数据可视化领域，D3 是一个强大的工具，它可以帮助我们将数据转化为直观的图形。本文将介绍如何使用 D3 实现树状图和封闭图的布局，以及如何处理鼠标和多点触摸设备的交互事件。

一、构建树状图

1.1 准备工作

在浏览器中打开本地的以下文件：

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter9/tree.html

1.2 代码实现

以下是使用 D3 实现树状图的代码：

function tree() {
  var _chart = {};
  var _width = 1600, _height = 800,
    _margins = {top:30, left:120, right:30, bottom:30},
    _svg,
    _nodes,
    _i = 0,
    _tree,
    _diagonal,
    _bodyG;
  _chart.render = function () {
    if (!_svg) {
      _svg = d3.select("body").append("svg")
        .attr("height", _height)
        .attr("width", _width);
    }
    renderBody(_svg);
  };
  function renderBody(