javascript - 使用 d3 选择 svg 子元素时遇到问题

Question

我有一个 svg，我正在尝试使用 d3.js 访问和修改它. svg 文件名为 us-map.svg .我在我的 html 中包含了对 svg 的引用，如下所示:

<object id="imgMap" data="us-map.svg" type="image/svg+xml">
</object>

我可以选择 imgMap在我的 chrome watch 面板中是这样的:

var imgMap = d3.select('#imgMap')

但是，我无法选择子元素。比如我的imgMap svg 有几个 child <g>此函数不返回元素，但不返回子元素:

d3.select('#imgMap').selectAll('g')

我是不是漏掉了什么？我在想 d3 可以用来遍历和操作现有的 svg 吗？

Answer 1

I was thinking that d3 could be used to traverse and manipulate an existing SVG

这几乎是 d3 最擅长的。但是当你写:

d3.select('#imgMap')

您没有选择 SVG(除非您有带 id = "imgMap" 的 SVG，这不是您的情况)。您正在使用 <object> .因此，你必须写:

var mySVG = d3.select(document.getElementById("imgMap").contentDocument);

然后使用 mySVG 选择您的组.

var myGroups = mySVG.selectAll("g");

请记住，此选择仅在对象加载后有效。

来源:https://benfrain.com/selecting-svg-inside-tags-with-javascript/

编辑:

根据 OP 的要求，这是一个基本的工作演示:https://plnkr.co/edit/RJOznJROiqTpo5dm9M7L?p=preview

在这个 plunkr 中，“mysvg.svg”是一个外部文件(在您的代码中，您必须提供正确的路径)。代码找到 SVG:

var mySVG = d3.select(document.getElementById("imgMap").contentDocument);

然后选择 SVG 中的蓝色圆圈，将其向右移动:

var myCircle = mySVG.select("#blueCircle"); 
myCircle.transition().duration(2000).attr("cx", 180);

注意这个:我设置了一个setTimeout 1000 毫秒，只是为了确保在代码运行之前加载对象。