如何使用D3.js方法重绘路径？

Question

我似乎无法获得.enter()和.exit以使路径正常工作.对于下面的代码,每当我尝试重绘路径时,它都会保留旧路径.

我冒昧地猜测.attr("d",stepline(csProg))的错误.我认为它应该更像.attr("d",function(d){stepline(d);})或类似的东西,但我无法让它工作.有什么建议？

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;
}

后来在代码中我会调用(或者这个效果):

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

但是,旧路径不会被删除.

编辑:这是一个JSFiddle与我看到的问题.http://jsfiddle.net/namit101/k8kUZ/26/

Answer 1

enter并且exit仅分别用于新添加的数据或仅删除数据.因此,enter并exit不会每次调用时执行的redraw,除非你的数据发生了变化,那么,它只会被称为新添加的数据或只是删除数据.

对于您的示例,您需要为数据创建唯一标识符,以便D3知道要删除哪些路径以及要添加哪些路径.data除了mydata变量之外,还可以通过将函数传递给方法来完成此操作.

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

这是一个更新的JSFiddle.

Answer 2

如果您无法理解何时使用和,那么您应该阅读思考加入.还有一个关于Path Transitions的好教程,它也可以帮到你.如果不发布完整的代码,很难推荐更多.enter()exit()