使用d3.js的Pack Layout节点中的NaN x和y值 [英] NaN x and y values in Pack Layout nodes using d3.js

问题描述

我正在尝试使用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/

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

https://github.com/mbostock/d3/wiki/Pack-布局#值

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

如此:

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

收件人:

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

I'm trying to make a circle packing chart using d3.js. The problem is that nodes have NaN values in the x and y properties, so all the circles have transform="translate(NaN,NaN)"

Json Data:

 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+")";});

Could anyone explain why the X and Y node values are NaN? I've created a jsFiddle with the data and the script I wrote: http://jsfiddle.net/nm9Lozn2/2/

解决方案

I think you need to change the argument you pass to .size of pack to an array. and also add .value since your data doesn't have value attributes:

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

If value is specified, sets the value accessor to the specified function. If value is not specified, returns the current value accessor, which assumes that the input data is an object with a numeric value attribute:

so:

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

to:

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

这篇关于使用d3.js的Pack Layout节点中的NaN x和y值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！