Question

我正在使用D3PlUS JS库（http://d3plus.org/），我需要实现一个带有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":[]
            }
        ]
    } 
]

<!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>

任何人都可以帮助我？

Answer 1

必须进行两项修改：

将数据更改为图表的预期值，特别注意使ID正确（请参阅docs）。这是最棘手的部分。
根据数据.id(["id","cid"])

这是一个完整的工作PLUNK。

编辑：根据OP请求，我向树形图添加了一个级别。保持id层次结构很重要，所以现在config参数是：.id(["id","cid","gid"])。此外，请确保删除json文件中包含子项的所有记录的value字段...否则，D3plus会将其视为与子项一起显示的值的一部分。

使用D3PLUS在树形图中使用json递归的问题

1 个答案: