时间戳

首页 > 解决方案 > 使用 D3 访问链接 SVG 的元素 ID

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

问题描述

尝试使用 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 中的值将颜色更改为红色或绿色。我使用蓝色只是为了说明。

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

标签： javascriptd3.jssvginkscape

解决方案

你有两个脚本。让我们将它们命名为脚本 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返回一个承诺。也就是说，它是异步的。

因此，脚本 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>

推荐阅读