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

Question

我需要创建一个可缩放的树状地图使用D3plus超过两个级别的缩放。

它应该类似于http://d3plus.org/examples/advanced/9860411/

基本上，我使用D3plus而不是D3，因为我想使用它的脚手架以一种更容易的方式创建树地图。

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

有人能在这方面帮我吗？提前感谢

Answer 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要包含的层数及其顺序。使用上面的数据结构并包括第三个缩放级别的"details“将是：.id(["group","name", "details"]) d3plus id() documentation and example here

Check out this fiddle