gpt4 book ai didi

javascript - 使用 d3 修改 HTML 中的 SVG

转载 作者:太空狗 更新时间:2023-10-29 16:35:38 29 4
gpt4 key购买 nike

这是我的第一篇文章,所以我会努力确保遵守适当的发帖礼仪。

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

关于javascript - 使用 d3 修改 HTML 中的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31543550/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com