Add new D3 chart above older ones

Question

I currently have a web app which adds a new d3 chart to the page upon every click of submit (after defining parameters). What I'd like to do is add the newest chart above the others and push the older ones down to allow space. It tried changing the svg append to prepend but it's obviously not going to be that simple!

Here's my script;

function chartGenerator(file_location)
{   
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var svg = d3.select("body").prepend("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("{% static 'dgconnection/data.csv' %}", function(error, data) {
    data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));

svg.prepend("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

svg.predend("g")
      .attr("class", "y axis")
      .call(yAxis)
      .prepend("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value");

svg.prepend("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

}

Answer 1

You can prepend elements to existing elements in D3, but the function isn't called prepend(), but insert() and takes two arguments. The first is, like for .append(), the name of the element to insert. The second is a selector. The new element will be inserted before the element that matches the selector.

In your case, the only code you need to change is this:

var svg = d3.select("body").insert("svg", "svg")