使用d3在HTML中修改SVG

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 个解决方案

解决方案1
1 已采纳 2015-07-21 16:28:44

解决方案2
1 2015-07-21 16:31:29

使用d3在HTML中修改SVG

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-07-21 16:28:44

解决方案2 1 2015-07-21 16:31:29

解决方案1
1 已采纳 2015-07-21 16:28:44

解决方案2
1 2015-07-21 16:31:29