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

Question

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

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

我可以像这样在我的 chrome 手表面板中选择imgMap：

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

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

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

我在这里遗漏了什么吗？我在想 d3 可以用来遍历和操作现有的 svg？

Answer 1

我在想 d3 可以用来遍历和操作现有的 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设置为1000ms，只是为了确保在代码运行之前加载了对象。