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

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

1. 构建树状图可视化

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

1.1 准备工作

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

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

1.2 代码实现

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 renderBo