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

Question

当尝试使用 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，都没有任何变化，没有错误。

Answer 1

您有两个脚本。让我们将它们命名为脚本 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>