Javascript 使用d3.js的包布局节点中的NaN x和y值

我正在尝试使用d3.js制作一个圆形包装图。问题是节点在x和y属性中具有NaN值，因此所有圆都具有transform=“translate（NaN，NaN）”

Json数据：

 var data = {
     "name": "flare",
     "children": [
      {
       "name": "analytics",
       "children": [
        {
         "name": "cluster",
         "children": [
          {"name": "AgglomerativeCluster", "size": 3938},
          {"name": "CommunityStructure", "size": 3812},
         ]
        },
        {
         "name": "graph",
         "children": [
          {"name": "BetweennessCentrality", "size": 3534}
         ]
        }]
    }]
    };

脚本：

    var diameter = 200;
    var w = 500;
    var h = 400;

    var pack = d3.layout.pack()
                .size(500,400);

    var svg = d3.selectAll("body").append("svg")
                .attr({width:w,height:h})
                .append("g").attr("transform","translate("+w/2+","+h/2+")");

    var nodes = pack.nodes(data);

    var circles = svg.selectAll("circle")
                    .data(nodes)
                    .enter()
                    .append("circle")
                        .attr("r",function(d){return d})
                        .attr("transform", function(d){return "translate("+d.x+","+d.y+")";});

---

有人能解释为什么X和Y节点的值是NaN吗？我已经用我写的数据和脚本创建了一个JSFIDLE:

我认为您需要将传递给

pack

的

.size

的参数更改为数组。还可以添加

.value

，因为您的数据没有值属性：

如果指定了值，则将值访问器设置为指定的函数。如果未指定值，则返回当前值访问器，该访问器假定输入数据是具有数值属性的对象：

因此：

致：

---

这个问题可能有几个原因，让我添加另一个可能性，我刚刚遇到。我看到了同样的问题，

d3.layout.pack

为坐标生成了

NaN

。在我的例子中，问题是我的数据中的一些值是负数。一旦我确定它们都是零或更大，它就开始正常工作了

我们如何在D3的V4中增加价值

var pack = d3.layout.pack()
            .size(500,400);

var pack = d3.layout.pack()
            .size([500,400])
            .value(function(d) { return d.size; });