1

d3.js を使い始めたばかりです (約 1.5 週間)。私は疑問に思っていました-ほとんどの例では、次のようなパターンを使用しています

mysvg.selectAll("rect").data(mydata,key).transition()...;

現在、私のコードは次のようになっています。特定の時間より前の場合は、特定の時間以降の点と線の長方形として時系列を描画できるようにしたいと考えています。それらを 1 つのシリーズにしてフィルターを適用することが可能であることはわかっていますが、1 つの select ステートメントを使用してシリーズを描画するためのより良い方法があるかどうか疑問に思っていました。

そうでない場合、フィルターを使用して実装するにはどうすればよいですか? 特に、時間を重ねるごとにバーが消えていく出口の使い方に戸惑います。.exit().remove() を並べ替えるいくつかの異なる方法を試しましたが、うまくいかないようです。

function drawChart(svgarea,mydata,key)
{   

var g = svgarea.append("svg:g");


var rects = g.selectAll("rect").data(mydata,key).enter().append("rect");
var lines = g.selectAll("line").data(mydata,key).enter().append("line");

drawAxis();

chartData = [];
chartData.redraw = function(timeIndex)
{                       
    rects.filter(function(d){
            var isAfter =  ...;
            return isAfter;})
        .transition().duration(500)
                    .attr(...,...);});  
    lines.filter(function(d){
            var isBefore =  ...;
            return isBefore;})
        .transition().duration(500)
                    .attr(...,...);});
    rects.exit().remove();  
}
chartData.redraw(0);
return chartData;
}

注: データは静的ではないため、このように設定しました。この小さなグラフのユーザーは、データの更新が行われた後に chart.redraw() を呼び出します (少なくともそれがアイデアです)。

4

1 に答える 1

1

選択したデータと結合する前に、データを分割する必要があります。を含む d3 の反復メソッドの多くは、JavaScriptfilterのオブジェクトによって提供されるメソッドに基づいていることに注意してください。Array

rectData = myData.filter(function(d) { /* filter conditions */ }
lineData = myData.filter(function(d) { /* filter conditions */ }

より詳しい情報：array.filter(callback[, thisObject])

そうすれば、再描画のたびにデータをフィルタリングする必要がなくupdate、ただ集中することができます。enter()

于 2012-07-12T21:43:45.903 に答える