JSFiddle - React, Tailwind, and code Playground

by csaid

JavaScript

//Create SVG Container
var svg = d3.select("body")
    .append("svg")

//Load external SVG
d3.xml("https://dl.dropboxusercontent.com/u/7402121/car.svg", "image/svg+xml", function (xml) {
    var importedNode = document.importNode(xml.documentElement, true);

    //Function to update vertical position of cars with new data
    function updatePositions(data) {

        var gs = svg.selectAll("g")
            .data(data);

        gs.enter().append("g");

        gs.exit().remove();

        gs.attr("transform", function (d, i) {
            return "translate(50," + d * 20 + ")";
        })
        
            .each(function (d, i) {
            var car = this.appendChild(importedNode.cloneNode(true));
            d3.select(car).select("path")
        })
    }

    //Three example datasets. This doesn't work.
    setTimeout(function () {
        updatePositions([1, 2, 4, 8])
    }, 1000)
    setTimeout(function () {
        updatePositions([2, 5, 7])
    }, 2000)
    setTimeout(function () {
        updatePositions([1, 2, 3, 4, 5])
    }, 3000)
})