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中，＆＃34; mysvg.svg＆＃34;是一个外部文件（在您的代码中，您必须提供正确的路径）。代码找到SVG：

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

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

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

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

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

1 个答案: