获取现有SVG元素的属性并使用d3.js绑定为数据

Question

我有一个现有的svg元素，例如：

<svg width="300" height="200">
    <circle cx="50" cy="10" r="5" fill="green"></circle>
    <circle cx="100" cy="20" r="10" fill="green"></circle>
    <circle cx="150" cy="30" r="15" fill="green"></circle>
</svg>

我想提取圆圈的cx值并将它们作为数据绑定回圆圈。我可以用一个来做：

var x = +d3.select('circle').attr('cx');
d3.select('circle').datum(x);

但是，我无法弄清楚如何将所有cx值收集到一个数组中，然后将它们连接到圆圈。 （或者在没有数据数组的情况下，可能有更直接的方法。）

This answer解释了如何查看控制台中的所有属性，但没有解释如何存储它们或将它们绑定到DOM元素。

Answer 1

这对你有用吗？

d3.selectAll('circle').datum(function() {
  return parseFloat(this.getAttribute('cx'));
});