How do I redraw a path using D3.js methodology?

Question

I can't seem to get the .enter() and .exit for a path to work correctly. For the code below, everytime I try to redraw the path, it keeps the old path.

I would venture to guess that what's wrong is the .attr("d",stepline(csProg)). I was thinking it should be something more like .attr("d",function(d) { stepline(d); }) or something like that, but I couldn't get it to work. Any suggestions?

function drawCloseChart(mysvg,mydata,cx1,cx2,cy1,cy2,oq)
{

var x = d3.scale.linear().domain([360*60, 390*60]).range([cx1, cx2]), 
    y = d3.scale.linear().domain([0,oq]).range([cy1,cy2]),
    z = d3.scale.category10();


var targetg = mysvg.append("svg:g");

    //code to draw x-axis
    //code to draw y-axis

var stepline = d3.svg.line()
    .x(function(d) { return x(d.time); })
    .y(function(d) { return y(d.val); })
    .interpolate("step-after");

var chartData = [];
chartData.redraw = function()
{


    var cpg = cprog.selectAll("path").data(csProg);
    cpg.enter()
        .append("path")
        .attr("d",stepline(csProg))
        .attr("fill","none")
        .attr("stroke-width","2")
        .attr("stroke","black");

    cpg.exit().remove();        

}
chartData.redraw();
return chartData;
}

And later in the code I would call (or something to this effect):

setInterval(function() { updateDate(); chartData.redraw(); },1000)

However, the old path doesn't get deleted.

EDIT: Here is a JSFiddle with the the problem I'm seeing. http://jsfiddle.net/namit101/k8kUZ/26/

Answer 1

enter and exit are only called for newly added data or just removed data respectively. Therefore, enter and exit will not be executed every time you call redraw unless your data has changed, and then, it will only be called for the newly added data or just removed data.

For your example, you need to create a unique identifer for your data so that D3 knows which paths to remove and which to add. This can be done by passing a function to the data method in addition to your mydata variable.

var cpg = cprog.selectAll("path").data(mydata, function(d) {
    return d.time + "-" + d.value; 
});

Here is an updated JSFiddle.

Answer 2

You should read Thinking with Joins if you're having trouble understanding when to use enter() and exit(). There's also a good tutorial on Path Transitions which may help you as well. Without posting your full code, it's tough to recommend more than that.