Javascript 使用d3修改HTML中的SVG

这是我的第一篇帖子，所以我会尽量确保我遵循了适当的发帖礼仪

我对html、d3或javascript没有任何经验。不过，我确实接触过xml和svg。我正在努力完成本教程：[昨天我花了几个小时试图完成第一步，但没有成功，那就是使用d3.selectAll（）更改三个圆的颜色和半径。我已经阅读了这里的几篇文章，并查看了其他教程，但我无法将圆圈变为蓝色。不幸的是，教程从未显示它们的全部代码。我能够显示三个黑色圆圈（原始svg）在我的浏览器中，但似乎无法让d3选择它们并执行更改。我甚至不确定xml是否嵌入到html中，或者它是否是外部的并以某种方式读入

有人可以发布你将使用的html吗？任何帮助都将不胜感激

以下是对应于圆圈的xml：

<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
 <circle cx="80" cy="60" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle>
</svg>

---

您的代码是正确的。我猜您没有正确地组合代码。下面是最简短的示例：

var circle=d3。选择全部（“circle”）；
圆形样式（“填充”、“钢蓝色”）；
圆圈。属性（“r”，30）；

您的代码看起来不错，肯定还有另一个问题。看看这把小提琴来演示应该发生什么。忽略过渡/持续时间/延迟，这只是为了让一切都变慢，以便容易看到

---

我认为我的错误是误解了教程希望我如何进行更改。我最终发现我需要通过开发人员工具输入更改颜色等的命令。感谢lhoworko&Mark的帮助。

var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);

var circle = d3.selectAll('circle')
    .transition().duration(750).delay(750)
    .style('fill', 'steelblue')
    .attr('r', 30);