6

我是 D3 的新手，除非我使用确切的示例数据，否则我很难使用气泡图：

具体来说，我遇到了麻烦

.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 的错误。鉴于气泡示例的示例数据，我不确定气泡示例如何创建 dx 和 dy

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

4

1 回答 1

11

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

稍后，对该函数的调用bubble.nodes使用value由 classes 函数创建的每个对象的属性（被推送到单个数组中）来计算 x 和 y（这又在 transform 函数中使用）。有关 pack 功能的更多信息，请参阅d3 文档。同样nodes的函数还计算r稍后使用的半径（as）。

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

所以不能直接把json数据传给bubble.nodes函数，除非满足特定要求（比如有value属性）。

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

于 2012-08-28T12:28:42.963 回答