Question

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

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

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

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

这是您的工作代码：

＆＃13;

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")
});

＆＃13;

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

＆＃13;

PS：我们无法在堆栈代码段中console.log D3选择，它会冻结。而不是那样，我把基地变成了红色。

PPS：不要使用<object>。你会发现在SVG上使用D3选择器很复杂。

在外部SVG中选择元素

1 个答案: