我需要使用具有两个以上缩放级别的D3plus创建可缩放的树状图。
它应该像http://d3plus.org/examples/advanced/9860411/
基本上,我使用的是D3plus而不是D3,因为我想使用其脚手架
以更简单的方式创建树形图。
无论如何,在D3中已经完成http://bost.ocks.org/mike/treemap/
谁可以帮我这个事?提前致谢
最佳答案
这在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 hereCheck out this fiddle