我需要使用 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"}
]
请注意,每个名称
标识它属于哪个组
。在本例中,group
是父节点,name
是子节点。
使用.id()
方法指示d3plus要包含多少个级别及其顺序。使用上面的数据结构并包括“详细信息”的第三个缩放级别将是: .id(["group","name", "details"])
d3plus id() documentation and example here
关于javascript - 具有两级以上的可缩放树形图,D3plus?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32966123/