具有两个以上级别的可缩放树形图，D3plus？答案

【问题标题】：Zoomable Treemap with more than two levels, D3plus?具有两个以上级别的可缩放树形图，D3plus？
【发布时间】：2015-12-16 06:11:46
【问题描述】：

我需要使用具有两个以上缩放级别的 D3plus 创建可缩放的树形图。
它应该类似于http://d3plus.org/examples/advanced/9860411/

基本上，我使用的是 D3plus 而不是 D3，因为我想使用它的脚手架以更简单的方式创建树状图。

无论如何，在 D3 中已经完成了http://bost.ocks.org/mike/treemap/

谁能帮我解决这个问题？提前致谢

【问题讨论】：

标签： javascript d3.js d3plus

【解决方案1】：

这在 D3plus 中非常简单，您可以通过在数据数组中包含额外的级别（节点）信息来获得任意数量的缩放级别。

这取决于两件事：

数据是一个扁平的json结构，包括节点之间的关系（父、子等）：

var sample_data = [
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 1"},
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 2"},
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 3"},
    {"value": 70, "name": "beta", "group": "group 2", "details": "example 1"},
    {"value": 70, "name": "beta", "group": "group 2", "details": "example 2"},
    {"value": 40, "name": "gamma", "group": "group 2", "details": "example 1"},
    {"value": 40, "name": "gamma", "group": "group 2", "details": "example 2"},
    {"value": 15, "name": "delta", "group": "group 2", "details": "example 1"},
    {"value": 15, "name": "delta", "group": "group 2", "details": "example 2"},
    {"value": 5, "name": "epsilon", "group": "group 1", "details": "example 1"},
    {"value": 5, "name": "epsilon", "group": "group 1", "details": "example 2"},
    {"value": 1, "name": "zeta", "group": "group 1", "details": "example 1"}
  ]

请注意，每个name 标识它属于哪个group。在这种情况下，group 是父节点，name 是子节点。

使用.id() 方法指示d3plus 包含多少级别及其顺序。使用上面的数据结构并包括“细节”的第三个缩放级别将是：.id(["group","name", "details"])d3plus id() documentation and example here

Check out this fiddle

【讨论】：