d3 - Agregar elementos al archivo SVG externo

I have a graphic I'd like to load as a background to my d3 visualization (or simply as an svg that I can append circle elements to). The illustration is in svg format. I have tried to load it into my html file in such a way that would allow me to then append elements (such as circles) to the (or on top of) the svg archivo o al div that it is in. Here are two approaches I have tried:

<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>

The svg image appears perfectly fine, but no circle shows up. In Firefox, the html for the external svg file shows up as:

<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">

También he intentado:

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

Again, the svg image appears perfectly fine, but no circle shows up. In this case, the html shows in the browser as:

<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>

I have the feeling this should be rather straightforward to do, but I don't know. Any help would be greatly appreciated.

preguntado el 27 de noviembre de 13 a las 04:11

In your first example, you didn't tell us how svg is defined. Note that you may need to add the svg namespace to any elements you append (i.e. .append("svg:circle")). -

Thank you for your reply. In the first example, I did not explicitly define svg. My assumption was that by doing svg.append("circle"), the code would select the svg element of the image (that appears in the html due to the preceding line). How can I tell it to use the svg of the image? Incidentally, if I open the svg file in a text editor and simply add the <circle> markup with cx, cy attributes and open it in a browser, the circles appear perfectly fine. There must a way to have d3 append these elements, but I don't know how to get it to recognize the svg of the image. -

D3 won't magically assign variables based on what's on the page. Instead of svg, prueba algo como d3.select("svg"). -

I just tried d3.select("svg").append("circle") instead and it did not work. No circle element appears in the html. -

¿Ha verificado que el svg element is selected correctly? It would help if you could provide a complete working example. -

1 Respuestas

There were two issues with the code you've tried. First, you need to define svg properly and second, you need to execute the code that modifies the SVG after it's been loaded. Because of the asynchronous nature of d3.xml, este no era el caso.

So the code you need to run is this.

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

Working fiddle (modulo security restrictions) aquí.

respondido 27 nov., 13:22

Wow! Thank you for figuring this out! If there is a Genius badge on stackoverflow, you should have it! - silbador

Is there any way to load the external SVG as normal objects that can be selected and manipulated outside of the d3.xml ¿función? - Amyunimus

That is the case already, the problem is, as I've said, that d3.xml is asynchronous. After it has finished loading, you can do whatever you want to the SVG. - Lars Kothoff

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.