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

我可以将半径设置为“items”，但我希望

.data(bubble.nodes(json)

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

有人可以详细解释一下吗？

Answer 1

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

稍后，对函数bubble.nodes的调用使用由classes函数创建的每个对象的value属性（被推入单个数组中）来计算x和y（依次为在变换函数中使用）。有关pack函数的更多信息，请参阅the d3 docs。同样的nodes函数也会计算稍后使用的半径（r）。

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

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

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