使用 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 时，我尝试查看元素。无论我如何尝试 select 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 到 select。但是问题来了：d3.xmlreturn一个承诺。即异步.

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

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

Accessing element ID of linked SVG with D3

javascript

svg

inkscape

d3.js