svgDoc = {
var dataArray1 = [30,35,45,55,70];
var dataArray2 = [50,55,45,35,20,25,25,40];
var dataIndex=1;
var xBuffer=50;
var yBuffer=150;
var lineLength=400;
var svgDoc = d3.select(DOM.svg(width, height));
svgDoc.append("text")
.attr("x",xBuffer+(lineLength/2))
.attr("y",50)
.text("dataset"+dataIndex)
.style("text-anchor","middle");
svgDoc.append("line")
.attr("x1",xBuffer)
.attr("y1",yBuffer)
.attr("x2",xBuffer+lineLength)
.attr("y2",yBuffer)
.style("stroke","#ddd")
.style("shape-rendering","crispEdges");
svgDoc.append("g").selectAll("circle")
.data(eval("dataArray"+dataIndex))
.enter()
.append("circle")
.attr("cx", place_circle)
.attr("cy",yBuffer)
.attr("r",function(d,i){return d})
.style("fill","orange")
.style("stroke", "orange")
.style("fill-opacity",'0.5');
d3.select("#monBouton")
.text("change data")
.on("click", on_click_func)
function on_click_func(){
dataIndex = dataIndex + i.pow(2*dataIndex-2)
var circle = svgDoc.select("g").selectAll("circle")
.data(eval("dataArray"+dataIndex));
circle.exit().remove();
circle.enter().append("circle")
.attr("r",0);
circle.transition()
.duration(500)
.attr("cx", place_circle)
.attr("cy",yBuffer)
.attr("r",function(d,i){return d});
svgDoc.select("text").text("dataset"+dataIndex);
};
function place_circle(d,i){
var spacing = lineLength/(eval("dataArray"+dataIndex).length);
return xBuffer+(i*spacing)
}
return svgDoc.node();
}