0

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

例子.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>

任何人都可以帮助我吗？

4

1 回答 1

2

两个修改是必要的：

  • 将数据更改为图表的预期值，特别注意正确设置 ID（请参阅文档）。这是最棘手的部分。
  • 根据数据将 ids 嵌套在配置参数中：.id(["id","cid"])

这是一个完整的工作PLUNK。

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

于 2014-05-15T21:51:12.933 回答