2

我似乎无法让 .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/

4

2 回答 2

8

enter并且exit仅对新添加的数据或刚刚删除的数据分别调用。因此，除非你的数据发生变化，否则每次调用都不会执行，enter然后，只会对新添加的数据或刚刚删除的数据调用。exitredraw

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

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

这是一个更新的JSFiddle。

于 2012-07-24T14:45:54.563 回答
5

如果您在理解何时使用和时遇到困难，您应该阅读Thinking with Joins。还有一个关于路径转换的很好的教程，它也可以帮助你。如果不发布您的完整代码，很难推荐更多内容。enter()exit()

于 2012-07-24T16:15:07.643 回答