Question

这是我的第一篇文章，所以我试着确保我遵循适当的帖子礼仪。

我对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);

Answer 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>

Answer 2

您的代码看起来不错，必须有另一个问题。看看这个小提琴来演示应该发生什么。忽略转换/持续时间/延迟，这只是为了减慢所有内容，以便它可以轻松看到。

http://jsfiddle.net/s6u5my8k/

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

使用d3在HTML中修改SVG

2 个答案: