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

いつ と を使用するか理解に苦しむ場合は、結合の考え方を読む必要がenter()ありexit()ます。同様に役立つパス遷移に関する優れたチュートリアルもあります。完全なコードを投稿しないと、それ以上のことを推奨するのは困難です。

于 2012-07-24T16:15:07.643 に答える