D3气泡图

Question

我是新来D3和我有气泡图一个很艰难的时期，除非我用确切的数据。例如：

• https://github.com/mbostock/d3/blob/master/examples/bubble/bubble.js
• https://github.com/mbostock/d3/blob/master/examples/data/flare.json

具体来说，我我有问题

.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

我无法运行得到这部分的代码与其他示例一起使用。

这里是JSON数据的一个子集，我有工作：

{ 
"name": 301, 
"children": [ 
    { 
     "resourceid": "11", 
     "creator_uid": "301", 
     "owner": "Tom", 
     "name": "Omega", 
     "created_time": "2012-03-07 20:07:11", 
     "items": "4" 
    }, 
    { 
     "resourceid": "188", 
     "creator_uid": "301", 
     "owner": "Tom", 
     "name": "Nexus", 
     "created_time": "2012-03-31 00:04:56", 
     "items": "14" 
    } 
    ] 
} 

我能够设置半径为“项目”，但我希望

.data(bubble.nodes(json) 

分发节点，但我得到的错误是DX是NULL。给定气泡示例的示例数据，我不确定气泡示例如何创建d.x和d.y.

请问有人能详细解释一下吗？

Answer 1

使用气泡图时，数据必须平滑。在您链接的示例中，调用了一个名为“classes”的函数，对于每个节点，该函数都将该类作为新对象返回，并且包含该大小的value属性。 （你上面的代码表明你省略了这个调用）。

后来，调用函数bubble.nodes使用由类功能（其被推到一个单一的阵列）中创建的每个对象的value属性来计算x和y（其又转换功能内使用） 。有关包装功能的更多信息，请参阅the d3 docs。同样的功能nodes函数也计算稍后使用的半径（如r）。

这就是确定气泡图的完整布局的调用nodes。示例中代码的其余部分都是关于在由nodes函数计算的结果指定的位置构造必要的SVG元素，例如圆和文本。

因此，除非符合特定要求（例如具有value属性），否则不能将json数据直接传递到bubble.nodes函数。

Here是jsfiddle.net上的一个工作示例。