10、数据可视化：分层数据与图的可视化实现

数据可视化：分层数据与图的可视化实现

在数据可视化领域，我们常常需要处理各种不同类型的数据结构。分层数据和图数据是其中比较常见且重要的两种。下面我们将详细介绍如何使用 D3 库来实现分层数据的可视化，以及如何处理图数据的可视化。

分层数据可视化

绘制和动画化矩形

我们希望能够在三种不同类型的可视化之间进行切换，这三种类型分别是展示人口（Population）、面积（Area）或密度（Density）。我们将需要展示的属性名称传递给 update 函数，该函数会使用这些值来渲染矩形。

function update(property) {
    var root = d3.hierarchy({values: entries}, function(d) { return d.values; })
        .sum(function(data) { return data[property]; })
        .sort(function(a, b) { return b.value - a.value; });
    tree(root);
    // ...
}

在上述代码中，我们首先通过调用 d3.hierarchy() 函数将嵌套结构 entries （ d3.nest() 函数的结果）转换为 D3 分层对象。我们传递一个新的根对象，将 entries 设置为其子节点，并告诉 D