d3 - 将元素附加到外部 SVG 文件

我有一个图形想要加载为 d3 可视化的背景（或者简单地作为svg我可以附加circle元素）。插图位于svg格式。我尝试将其加载到我的html文件的方式允许我将元素（例如圆圈）附加到（或顶部）svg文件或到div这是我尝试过的两种方法：

<script>

d3.xml("bal.svg", "image/svg+xml", function(xml) {
  document.body.appendChild(xml.documentElement);
});

var circle = svg.append("circle")
                .attr("cx", 100)
                .attr("cy", 100)
                .attr("r", 20)
                .style("fill", "red");

</script>

svg 图像看起来非常好，但没有出现圆圈。在火狐浏览器中，html对于外部的svg文件显示为：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="250px" height="250px" viewBox="0 0 250 250" 
enable-background="new 0 0 250 250" xml:space="preserve">

我也尝试过：

<div id="htmlEmbed"></div>

<script>

d3.select("#htmlEmbed")
.append("object")
.attr("data", "tba2.svg")
.attr("width", 500)
.attr("height", 500)
.attr("type", "image/svg");

d3.select("#htmlEmbed")
.append("circle")
.attr("cx", 600)
.attr("cy", 600)
.attr("r", 20)
.style("fill", "red"); 

同样，svg 图像看起来非常好，但没有出现圆圈。在这种情况下，html 在浏览器中显示为：

<object width="500" height="500" data="tba2.svg" type="image/svg">
#document
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="500px" height="500px" viewBox="0 0 250 250" 
enable-background="new 0 0 250 250" xml:space="preserve"> … </svg>
</object>

我感觉这应该很简单，但我不知道。任何帮助将不胜感激。

您尝试过的代码有两个问题。首先，您需要定义svg其次，您需要在加载 SVG 后执行修改 SVG 的代码。由于异步的性质d3.xml， 此情况并非如此。

所以你需要运行的代码是这样的。

d3.xml("http://openvz.org/images/1/17/Warning.svg", function(xml) {
  document.body.appendChild(xml.documentElement);

  var circle = d3.select("svg").append("circle")
            .attr("cx", 100)
            .attr("cy", 100)
            .attr("r", 20)
            .style("fill", "red");
});

工作小提琴（模安全限制）here http://jsfiddle.net/Jw2f8/8/.