Question

我正在尝试使用d3.js创建一个圆形打包图表。问题是节点在x和y属性中具有NaN值，因此所有圆圈都有 transform =＆＃34; translate（NaN，NaN）＆＃34;

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/

Answer 1

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

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

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

这样：

.value

为：

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

Answer 2

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

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

2 个答案: