使用 d3.js 的 Pack Layout 节点中的 NaN x 和 y 值

我正在尝试使用 d3.js 制作圆形包装图。问题是节点的 x 和 y 属性具有 NaN 值，因此所有圆都有变换=翻译（NaN，NaN）"

杰森数据：

 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}
         ]
        }]
    }]
    };

Script:

    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？我用数据和我编写的脚本创建了一个 jsFiddle：http://jsfiddle.net/nm9Lozn2/2/ http://jsfiddle.net/nm9Lozn2/2/

我认为你需要改变你传递给的论点.size of pack到一个数组。并且还添加.value因为您的数据没有值属性：

https://github.com/mbostock/d3/wiki/Pack-Layout#value https://github.com/mbostock/d3/wiki/Pack-Layout#value

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

so:

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

to:

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