使用 d3 在 HTML 中修改 SVG答案

【问题标题】：Modifying an SVG in HTML using d3使用 d3 在 HTML 中修改 SVG
【发布时间】：2015-07-22 00:31:29
【问题描述】：

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

我对 html、d3 或 javascript 没有任何经验。然而，我确实对 xml 和 svg 有一些了解。我正在尝试完成本教程：[http://bost.ocks.org/mike/circles/]。我昨天花了几个小时徒劳地试图完成第一步，即使用 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.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);

【问题讨论】：

我认为我的错误是误解了教程希望我如何进行更改。我终于想通了，我需要通过开发者工具输入命令来改变颜色等。感谢 lhoworko 和马克的帮助。

标签： javascript html d3.js svg

【解决方案1】：

您的代码是正确的。我猜你没有把它正确地放在一起。这是最短的例子：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  </head>

  <body>
    <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>
    <script>
      var circle = d3.selectAll("circle");
      circle.style("fill", "steelblue");
      circle.attr("r", 30);
    </script>
  </body>

</html>

【讨论】：

【解决方案2】：

您的代码看起来不错，肯定还有其他问题。看看这个小提琴来演示应该发生什么。忽略过渡/持续时间/延迟，这只是为了减慢一切，以便轻松可见。

http://jsfiddle.net/s6u5my8k/

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

【讨论】：