logo标签列表

在HTML中使用d3修改SVG

javascripthtmld3.jssvg
5

这是我的第一篇帖子，所以我会尽量确保遵守适当的发布礼仪。

我对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 和 Mark 的帮助。 - e7h3r
2个回答
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>

1

你的代码看起来不错，肯定是另外一个问题。看看这个示例展示了应该发生什么。忽略过渡/持续时间/延迟，那只是为了减慢一切让它更容易看到。

http://jsfiddle.net/s6u5my8k/

var circle = d3.selectAll('circle')
    .transition().duration(750).delay(750)
    .style('fill', 'steelblue')
    .attr('r', 30);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接