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

【问题标题】：NaN x and y values in Pack Layout nodes using d3.js使用 d3.js 的 Pack Layout 节点中的 NaN x 和 y 值
【发布时间】：2015-06-04 13:06:14
【问题描述】：

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

【问题讨论】：

标签： javascript d3.js data-visualization circle-pack

【解决方案1】：

我认为您需要将传递给.size 的pack 的参数更改为数组。并添加.value，因为您的数据没有值属性：

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

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

所以：

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

到：

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

【讨论】：

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

【解决方案2】：

这个问题可能有几个原因，让我补充一下我刚刚遇到的另一种可能性。我看到d3.layout.pack 为坐标生成NaN 的相同问题。就我而言，问题是我的数据中的某些值是负数。一旦我确定它们都为零或更大，它就开始正常工作了。

【讨论】：