javascript - 在外部 SVG 中选择元素

Question

我正在尝试通过 D3.js 选择和修改 SVG 的特定部分。 SVG 是外部的。我不知道是通过标签还是使用 d3.xml 导入 SVG。两者都不适合我。

我设法通过标签在 HTML 中获取了 SVG，但我仍然无法使用 d3 选择 SVG 中的任何元素。

我也不知道最好的做法是使用标签还是d3.xml

https://jsfiddle.net/67fvhwc0/

d3.xml("https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg").mimeType("image/svg+xml").get(function(error, xml) {
  if (error) throw error;
  document.body.appendChild(xml.documentElement);
});

var base = d3.select('#rect2801');
console.log(base);
base.attr("fill", "red");

Answer 1

这里有一个简单的错误:您使用的是 D3 v5，而不是 v4。因此，您必须使用 promises (而不是 v4 中的 XMLHttpRequest)。

因此，应该是:

d3.xml("https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg")
    .then(function(xml) {
        document.body.appendChild(xml.documentElement);
    });

此外，将依赖于数据的所有内容移动到内部 Promise.prototype.then() ，或适当的功能。所以:

d3.xml("https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg")
    .then(function(xml) {
        document.body.appendChild(xml.documentElement);
        var base = d3.select('#rect2801');
        console.log(base);
    });

要阅读有关 D3 v5 中更改的更多信息:https://github.com/d3/d3/blob/master/CHANGES.md

这是您的工作代码:

d3.xml("https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg").then(function(xml) {
  document.body.appendChild(xml.documentElement);
  var base = d3.select('#rect2801');
  base.style("fill", "red")
});

<script src="https://d3js.org/d3.v5.min.js"></script>

PS:我们不能console.log在堆栈片段中选择 D3，它卡住了。相反，我将底座变成红色。

PPS:不要使用 <object> .您会发现在该 SVG 上使用 D3 选择器很复杂。