javascript - 在外部SVG中选择元素

我正在尝试通过D3.js选择和修改SVG的特定部分。 SVG是外部的。我不知道是否通过标签或使用d3.xml导入SVG。都没有为我工作。

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

我也不知道最佳实践是使用use标签还是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");

最佳答案

您在这里有一个简单的错误：您使用的是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选择器很复杂。