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的错误.给出了气泡示例的示例数据,我不确定气泡示例是如何创建dx和dy的

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

Answer 1

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

稍后,对函数的调用bubble.nodes使用value由classes函数创建的每个对象的属性(被推入单个数组)来计算x和y(反过来在transform函数中使用).有关pack函数的更多信息,请参阅d3文档.同样的nodes函数也计算r稍后使用的半径(as ).

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

因此,除非满足特定要求(例如具有value属性),否则无法直接将json数据传递给bubble.nodes函数.

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