将函数映射到选定元素

Question

让我们在svg中假设三个圈子。

<svg height="400" width="400">
<circle cx="100" cy="110" r="10"></circle>
<circle cx="200" cy="210" r="10"></circle>
<circle cx="300" cy="310" r="10"></circle>
</svg>

现在我想使用d3.js来组成一个表示圆圈位置的对象数组，如下所示：

[{"x":100,"y":110},{"x":200,"y":210},{"x":300,"y":310}]

我对d3.js的直觉和相当生疏的知识告诉我，类似的东西应该有效：

d3.selectAll("circle").map(function () {
    return {
        "x": d3.select(this).attr("cx"),
        "y": d3.select(this).attr("cy")
    };
});

我将一个函数映射到返回一个对象的选定圆的数组。

但它没有。有人可以帮我吗？

---

code on jsfiddle.net

Answer 1

D3并不是真的意味着这种事情，但如果你绝对想要，你可以进入其内部数据结构来提取节点列表并迭代它们：

var locations = d3.selectAll("circle")[0].map(function(el) {
  return {
    "x": d3.select(el).attr("cx"),
    "y": d3.select(el).attr("cy")
  };
})

完整演示here。