CODEWITHSUNDEEP
javascriptsvgd3.js
user1167650
user1167650

Reputation: 3207

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

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/

Upvotes: 2

Views: 6711

Answers (2)

Brant Olsen
Brant Olsen

Reputation: 5664

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.

Upvotes: 9

Wex
Wex

Reputation: 15715

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.

Upvotes: 5

Related Questions