gpt4 book ai didi

javascript - 使用 D3 访问链接的 SVG 的元素 ID

转载 作者:行者123 更新时间:2023-11-30 13:55:32 24 4
gpt4 key购买 nike

当尝试使用 D3 访问 inkscape svg 元素时,没有任何变化。没有错误。

SVG 在我的 HTML 上显示正常

我已经检查了inkscape中的ID,并嵌套了.select()。已经使 svg 成为全局变量。我没有收到任何错误,所以我不知道这是怎么漏掉的。

<div id="CryoSVG">
<script> svg = d3.xml('/Data/CryoConcept.svg').then(data => { document.body.append(data.documentElement);})</script>
<script> d3.select("svg").select("V6").style("fill","blue");</script>
</div>

在实践中,我希望 D3 读取文件并根据 txt 中的值将颜色更改为红色或绿色。我使用蓝色只是为了说明。

在浏览器中检查 HTML 并使用 D3 为 SVG (id="svg8") 生成的 ID 时,我尝试查看元素。无论我如何尝试选择 SVG,都没有任何变化,没有错误。

最佳答案

您有两个脚本。让我们将它们命名为脚本 1...

<script> 
svg = d3.xml('/Data/CryoConcept.svg').then(data => { document.body.append(data.documentElement);})
</script>

...和脚本 2:

<script> 
d3.select("svg").select("V6").style("fill","blue");
</script>

您可能会认为,由于脚本 1 在脚本 2 之前出现,因此它先执行,元素将在那里供 D3 选择。但问题来了:d3.xml 返回一个 promise 。也就是说,它是异步

因此,脚本 2 将脚本 1 下载 SVG 并附加它之前运行。

解决方案:只使用一个脚本,并将依赖于附加 SVG 的所有内容移动到 then 方法中:

<script> 
svg = d3.xml('/Data/CryoConcept.svg').then(data => {
document.body.append(data.documentElement);
d3.select("svg").select("V6").style("fill","blue");
})
</script>

关于javascript - 使用 D3 访问链接的 SVG 的元素 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57380867/

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