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. /

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/namit101/k8kUZ/26/

• javascript
• svg
• d3.js

• Does .attr("d",stepline(csProg)) work? I've always seen it as .attr("d",stepline). – Wex Commented Jul 24, 2012 at 16:14
• It does indeed work. I'm forgetting the example, but I've seen it used some where too. – user1167650 Commented Jul 24, 2012 at 17:25

2 Answers 2

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.

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 remend more than that.