使用d3修改HTML中的SVG

这是我的第一篇文章，所以我会尽量确保我遵循适当的发布礼节。使用d3修改HTML中的SVG

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

来源

2015-07-21 e7h3r

我觉得我的错误是误解了教程如何希望我所做的更改。我终于明白，我需要通过开发人员工具输入命令来更改颜色等。感谢lhoworko和Mark的帮助。 – e7h3r

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

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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>

来源

2015-07-21 16:28:44 Mark

您的代码看起来不错，一定有另一个问题。看看这个小提琴演示会发生什么。忽略转换/持续时间/延迟，这只是为了减慢一切，因此很容易看到。

http://jsfiddle.net/s6u5my8k/

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

来源

2015-07-21 16:31:29 lhoworko

使用d3修改HTML中的SVG

回答

相关问题