Javascript 在使用D3PLUS的树映射中使用json递归时出现的问题_Javascript_Json_D3.js_Treemap_D3plus

Javascript 在使用D3PLUS的树映射中使用json递归时出现的问题

javascript json d3.js

Javascript 在使用D3PLUS的树映射中使用json递归时出现的问题,javascript,json,d3.js,treemap,d3plus,Javascript,Json,D3.js,Treemap,D3plus,我正在使用D3PlUS JS库（），我需要实现一个带有json递归结构的树形图。我可以只做一个第一级树形图，但我不能把我的代码设计成多级 example.json [ { "id":"First cell", "value": 10, "child": [ { "id":"Child first cel", "value": 10,

我正在使用D3PlUS JS库（），我需要实现一个带有json递归结构的树形图。我可以只做一个第一级树形图，但我不能把我的代码设计成多级

example.json

[
    {
        "id":"First cell",
        "value": 10,
        "child": 
        [ 
            {
                "id":"Child first cel",
                "value": 10,
                "child":[]
            }
        ]
    },

    {
        "id":"Second cell",
        "value": 90,
        "child": 
        [ 
            {
                "id":"Child second cell 1",
                "value": 10,
                "child":[]
            },
            {
                "id":"Child second cell 2",
                "value": 20,
                "child":[]
            },{
                "id":"Child second cell 3",
                "value": 10,
                "child":[]
            }
        ]
    } 
]


//实例化d3plus
var可视化=d3plus.viz（）
.container（“#viz”）//保存可视化的container DIV
.data（“data/example.json”）
.type（“树映射”）//可视化类型
.id（“id”）//我们的数据在其上是唯一的密钥
.size（“值”）//砌块的尺寸
.draw（）//最后，绘制可视化！

有人能帮我吗？

需要进行两次修改：

将数据更改为图表所期望的内容，特别注意正确使用ID（请参阅）。这是最棘手的部分
根据以下数据将id嵌套在配置参数中：
```
.id（[“id”，“cid”]）
```

这是一份完整的工作报告

编辑：每个OP请求，我在树状图中增加了一个级别。保持id层次结构很重要，因此现在配置参数是：

.id（[“id”、“cid”、“gid”）

。另外，请确保JSON文件中的“<代码>值/代码>字段”用于所有具有子记录的记录…否则，D3PrPress会将其视为与孩子一起显示的值的一部分。

嘿@ FernOfTheAndes，THKS回答我！但我试图在你的例子中增加更多的等级，但我还不知道是什么。能帮我做些什么吗？@TulioCruz请看我对plunk的编辑，现在有3个等级。根据上述说明，如果需要，您应该能够进一步扩展此功能。

<!doctype html>
<meta charset="utf-8">

<link href="http://d3plus.org/css/d3plus.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://d3plus.org/js/d3.js"></script>
<script src="http://d3plus.org/js/d3.geo.tile.js"></script>
<script src="http://d3plus.org/js/topojson.js"></script>
<script src="http://d3plus.org/js/modernizr.js"></script>
<script src="http://d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>

  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data("data/exemple.json")
    .type("tree_map")   // visualization type
    .id("id")         // key for which our data is unique on
    .size("value")      // sizing of blocks
    .draw()             // finally, draw the visualization!

</script>