Import and animate svg

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

by ramnathv

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

S = {}
S.y = d3.scale.ordinal()
  .domain(d3.range(4))
  .rangeRoundBands([0, h])

S.x = d3.scale.linear()
  .domain([0, 25])
  .range([0, w])

function translate(d){
 return "translate(" + d[0] + " , " + d[1] + ")" + " scale(0.3)"  
}

var external_svg = "https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg"
d3.xml(external_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([0, S.y(i)])
     })
     .each(function(d, i){
       var plane = this.appendChild(importedNode.cloneNode(true))
     })
     .transition().duration(2000)
     .attr("transform", function(d, i){
       return translate([S.x(d), S.y(i)]) 
     })
    
})

//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 - 30) + ")"
            +"scale("+ 0.3 +")";
    })
    .each(function(d, i){ 
        var plane = this.appendChild(importedNode.cloneNode(true)); 
        d3.select(plane).select("path").attr("fill", "blue");
    })
    .transition()
    .duration(2000)
    .attr("transform", function(d, i){ 
        return "translate(" + (i * (w / dataset.length)) + "," 
            + (h - d*4 - (w / dataset.length)) + ")"
            +"scale("+ 0.3 +")";
    });    
});
*/