Javascript 在外部SVG中选择元素

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

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

我也不知道最佳实践是使用标记还是d3.xml

---

这里有一个简单的错误：您使用的是D3V5，而不是v4。因此，必须使用（而不是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中更改的更多信息，请执行以下操作：

这是您的工作代码：


d3.xml（“https://upload.wikimedia.org/wikipedia/commons/8/89/Baseball_diamond_clean.svg）然后（函数（xml）{
document.body.appendChild（xml.documentElement）；
var base=d3。选择（“#rect2801”）；
基本样式（“填充”、“红色”）
});
标签就是我正在使用的标签
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);
    });