Question

我正在使用D3 circle packing的示例和我自己的数据，请参阅小提琴：https://jsfiddle.net/c3k947z2/3/

＆＃13;

var data = [{
    "name": "asdfgh",
    "category": "C",
    "color": "#F29999",
    "count": 0
}, {
    "name": "asdfgh",
    "category": "C",
    "color": "#D883A7",
    "count": 29
}, {
    "name": "asdfgh",
    "category": "C",
    "color": "#F05067",
    "count": 0
}, {
    "name": "asdfgh",
    "category": "C",
    "color": "#E86F6F",
    "count": 0
}, {
    "name": "asdfgh",
    "category": "C",
    "color": "#CE8C8C",
    "count": 13
}];

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var format = d3.format(",d");

var pack = d3.pack()
  .size([width - 2, height - 2])
  .padding(3);

(function() {
  console.log(JSON.stringify(data));
  var root = d3.hierarchy({
      children: [{
        children: data
      }]
    })
    .sort(function(a,b){ return b.data.count - a.data.count; })
    .sum(function(d) {
      return d.count;
    });

  pack(root);

  var node = svg.select("g")
    .selectAll("g")
    .data(root.descendants())
    .enter().append("g")
    .attr("transform", function(d) {
      return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("class", function(d) {
      return "node" + (!d.children ? " node--leaf" : d.depth ? "" : " node--root");
    })
    .each(function(d) {
      d.node = this;
    });

  node.append("circle")
    .attr("id", function(d) {
      return "node-" + d.id;
    })
    .attr("r", function(d) {
      return d.r;
    })
    .style("fill", function(d) {
      return d.data.color;
    });
})();

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="360" height="360">
  <g transform="translate(1,1)"></g>
</svg>

＆＃13;

我不知道d3.hierarchy（）中究竟发生了什么，但更改数据中的某些数字可能会导致浏览器崩溃。例如，您可以尝试将蓝色圆圈的计数更改为50（从55开始）。或者1或0 ......并且浏览器不响应，也不记录任何错误。这些只是我尝试的随机组合。

有谁可以解释发生了什么？知道如何调查导致问题的原因吗？

D3 Circle-Packing抛出NaN和Infinity错误或崩溃浏览器

0 个答案: