可缩放的树图与两个以上的水平，D3plus

Zoomable Treemap with more than two levels, D3plus?

本文关键字：两个 D3plus 水平 缩放      更新时间：2023-09-26

我需要使用D3plus创建一个具有两个以上缩放级别的可缩放树状图。
应该是http://d3plus.org/examples/advanced/9860411/

基本上，我使用D3 +而不是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要包含多少个关卡及其顺序。使用上面的数据结构并包括"details"的第三个缩放级别将是:.id(["group","name", "details"]) d3plus id()文档和示例这里

看看这个小提琴

相关文章：