具有两个以上级别的Zoomable Treemap,D3plus?

时间:2015-10-06 09:16:33

标签: javascript d3.js d3plus

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

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

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

任何人都可以帮我这个吗?提前致谢

1 个答案:

答案 0 :(得分: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