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

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 值并将它们作为数据绑定(bind)回圆圈。我可以用一个:

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

但是我无法弄清楚如何将所有 cx 值收集到一个数组中并将它们加入到圆圈中。 (或者也许有更直接的方法可以在没有数据数组的情况下执行此操作。)

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

Answer 1

这对你有用吗？

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