D3气泡图

Question

我刚接触D3，除非使用确切的示例数据，否则我很难理解Bubble Chart（气泡图）：

• 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的错误提示。鉴于bubbles示例的样本数据，我不确定bubbles示例是如何创建"d.x"和"d.y"的。

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

- Boom Shakalaka

Answer 1

使用气泡图时，数据必须被展开。在你提供的示例中，有一个名为“classes”的函数调用，该函数针对每个节点返回一个新对象作为类，并将value属性包含在其中作为大小。（你上面的代码表明你省略了这个调用）。

稍后，调用函数bubble.nodes使用由classes函数创建的每个对象的value属性（它们被推入单个数组中）来计算x和y（这反过来又在transform函数中使用）。有关pack函数的更多信息，请参见d3文档。这个相同的nodes函数还计算半径（作为r），稍后会用到。

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

因此，除非满足特定要求（例如具有value属性），否则无法直接将JSON数据传递给bubble.nodes函数。 这里是在jsfiddle.net上的一个工作示例。

- WiredPrairie