15、D3.js 可视化布局与交互实现指南

D3.js 可视化布局与交互实现指南

一、可视化布局

1.1 构建树状图

树状图是展示层次数据结构中不同数据元素之间结构依赖关系的常用可视化方式。树是一种无向图，其中任意两个节点通过唯一的简单路径相连。下面将介绍如何使用 D3 的树布局来实现树状图可视化。

准备工作

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

实现步骤

以下是使用 d3.layout.tree 的代码示例：

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);