d3 - Добавить элементы во внешний файл SVG

Question

У меня есть графический объект, который я хотел бы загрузить в качестве фона для моей визуализации 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 прекрасно выглядит, но круг не отображается. В Firefox, то 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> 

У меня есть чувство, что это должно быть довольно просто сделать, но я не знаю. Любая помощь будет принята с благодарностью.

Answer 1

Были проблемы с кодом, который вы пробовали. Во-первых, вам нужно правильно определить 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.