Question

我想将D3JS中的JSON表示为树形图。

我正在关注本教程：https://bl.ocks.org/d3indepth/d4f8938a1fd0914b41ea7cb4e2480ca8

我从数据中制作了一个JSON，它可以正常工作，显示了树状图。现在，我想将此代码用于自己的JSON：https://next.json-generator.com/NklG4H4bL?fbclid=IwAR0g-F2TrMv0FOrDpJIsiold4AwmD1gU3vxhv772Alfz_o--g0XSrpKXqbQ

使用此JSON，我的树形图不会出现。这是什么原因？

我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Treemap layout</title>
    <style>
        rect {
          fill: cadetblue;
          opacity: 0.3;
          stroke: white;
        }
        </style>
</head>

<body>
  <svg width="420" height="220">
    <g></g>
  </svg>

  <script src="//d3js.org/d3.v4.min.js"></script>
  <script>

d3.json("test.json", function(error, data) {

    var treemapLayout = d3.treemap()
    .size([400, 200])
    .paddingOuter(10);

    var root = d3.hierarchy(data)

    root.sum(function(d) {
     return d.value;
    });

    treemapLayout(root);

    d3.select('svg g')
      .selectAll('rect')
      .data(root.descendants())
      .enter()
      .append('rect')
      .attr('x', function(d) {return d.x0; })
      .attr('y', function(d) {return d.y0; })
      .attr('width', function(d) {return d.x1 - d.x0; })
      .attr('height', function(d) {return d.y1 - d.y0; })
    })
</script>
</body>
</html>

Answer 1

JSON区分大小写。

我看到树形图布局总是期望一个节点具有数组类型的“名称”属性和“ c hildren”属性。

并且树的叶子总是必须具有“值”属性。

您要发送的树在节点上没有“名称”属性（但是我不确定是否需要），并且具有“ C hildren”而不是“ c” hildren”。

也许解决问题可能会起作用。

顺便说一句：通常JSON是camelCase，因此您的JSON不是标准的。

JSON无法正确加载

1 个答案: