Question

在 d3 中无法使用气泡图

2015-12-17

46

javascript d3.js charts

将需要一个泡沫图表，用于我正在处理的事情，并正在使用 http：//bl.ocks .org/mbostock/4063269 例如。我的数据将以扁平的格式出现，因此我不需要处理节点树并将其弄平，因此我删除了该部分。

问题是，在删除了并简化其余部分之后，它似乎对数据没有任何作用。我猜我的数据格式不正确，但我不确定。

<a href="http://tributary.io.io/inlet/b54cdb7104c40b1d7d7df3" rel="nofollow“> httpppp ：//tributary.io/inlet/b54cdb7104c40b1d7df3 我没有运行它的错误，但是我显然必须在这里缺少一些东西，对吗？

Answer 1

即使您的数据是平面的，包布局也需要分层数据。您必须为其提供至少一个根节点的 children ：

var json = {
  "data": {
    "children": [{ //<-- needs a child...
      "name": "test",
      "value": 55
    }, {
      "name": "test2",
      "value": 34
    }]
  }
};

完整代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>

<body>
  <script>
    var json = {
      "data": {
        "children": [{
          "name": "test",
          "value": 55
        }, {
          "name": "test2",
          "value": 34
        }]
      }
    };

    var diameter = 960,
      format = d3.format(",d"),
      color = d3.scale.category20c();

    var bubble = d3.layout.pack()
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5);

    var svg = d3.select("body").append("svg")
      .attr("width", diameter)
      .attr("height", diameter)
      .attr("class", "bubble");


    var node = svg.selectAll(".node")
      .data(bubble.nodes(json.data))
      .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
      });

    node.append("title")
      .text(function(d) {
        return d.name + ": " + format(d.value);
      });

    node.append("circle")
      .attr("r", function(d) {
        return d.r;
      })
      .style("fill", function(d) {
        return color(d.name);
      });

    node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) {
        return d.name;
      });
  </script>
</body>

</html>