How to add a SVG image in D3

First of all - Happy 2014 to all of you!.

In D3, you have the option of importing XML. SVG is and XML based vector image format.

1
2
3
4
5
6
7
8
9
10
11
d3.xml("/assets/infographics/" 
       + svgSource, 
"image/svg+xml", 
function(xml) {			
 var importedNode = document.importNode(xml.documentElement, true);
	
	$('#svg-image')
        .find('g#' + id).append($(xml.documentElement).clone());
			container.attr("x" , "200px");
			container.attr("y", "200px");
 });

If you are interested in generating dynamic Infographics automatically - try Secondprism’s Infographic generator here.

Published: January 02 2014

  • Category :