Import svg

Import with d3.xml, appendChild to a group element, change the attributes from D3

by christopheviau

JavaScript

var dataset = [ 5, 10, 13, 19];

//Width and height
var w = 300;
var h = 300;

//Create SVG Element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Import the plane
d3.xml("https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg", "image/svg+xml", function(xml) {  
  var importedNode = document.importNode(xml.documentElement, true);
  svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .attr("transform", function(d, i){ 
        return "translate(" + (i * (w / dataset.length)) + "," 
            + (h - d*4 - (w / dataset.length)) + ")"
            +"scale("+ 0.3 +")";
    })
    .each(function(d, i){ 
        var plane = this.appendChild(importedNode.cloneNode(true)); 
        d3.select(plane).select("path").attr("fill", "blue");
    });    
});