我需要使用具有两个以上缩放级别的 D3plus 创建一个可缩放的树形图。
它应该类似于http://d3plus.org/examples/advanced/9860411/
基本上,我使用的是 D3plus 而不是 D3,因为我想使用它的脚手架以更简单的方式创建树形图。
无论如何,在 D3 中已经完成http://bost.ocks.org/mike/treemap/
谁可以帮我这个事?提前致谢
我需要使用具有两个以上缩放级别的 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() 文档和示例here