e7h*_*h3r 5 html javascript svg d3.js
这是我的第一篇文章,所以我会尽力确保我遵循适当的帖子礼仪.
我对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);
你的代码是正确的。我猜你没有正确地将它们组合在一起。这是最短的例子：
<!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>