NVD3 - スタック領域チャートに複数の垂直線を追加およびサイズ変更

Question

スタック領域チャートに複数の垂直線を追加しようとしています。

複数の行を追加するには、forループを使用します（これは最善の方法ではないかもしれません）。問題は、for-loopがnv.utils.windowResize()で行を更新するときに機能していないように見えます。最後の行だけが最終的に更新されました。

これは、ループを使用せずにもっとD3の方法で行うことができますか？問題を再現するためのHere is a fiddle（行207〜235）。

私は自然の中でもう少し d3 -ishするカスタムラインを再書き込みたい

Answer 1

（ETC利用データ・バインディング、明示的なループ、...）

var xgrid = [1166996800000, 1186996800000, 1216996800000]; 

// add vertical lines 
var custLine = d3.select('#stackedbarchart') 
    .select('.nv-areaWrap') 
    .append('g'); 

custLine.selectAll('line') 
    .data(xgrid) 
    .enter() 
    .append('line') 
    .attr({ 
     x1: function(d){ return chart.xAxis.scale()(d) }, 
     y1: function(d){ return chart.yAxis.scale()(0) }, 
     x2: function(d){ return chart.xAxis.scale()(d) }, 
     y2: function(d){ return chart.yAxis.scale()(1) } 
    }) 
    .style("stroke", "#000000"); 

そして更新はなり：

nv.utils.windowResize(function() { 
    chart.update(); 
    custLine.selectAll('line') 
    .transition() 
    .attr({ 
     x1: function(d){ return chart.xAxis.scale()(d) }, 
     y1: function(d){ return chart.yAxis.scale()(0) }, 
     x2: function(d){ return chart.xAxis.scale()(d) }, 
     y2: function(d){ return chart.yAxis.scale()(1) } 
    }); 
}); 

注そこにおける遷移の使用線グラフの再描画と少し良く移動させます。

fiddleが更新されました。

Answer 2

これを行うにはforループが必要ではありません。selectAllを使用してください。ここでは一つの方法です：

まず、垂直線を選択するために、簡単に、私は彼らに上の行を更新するには、このIDとのSelectAllを使用するとライン上のforループでvlines、210

.attr('id', 'vlines') 

と呼ばれるIDを割り当てサイズを変更します。

nv.utils.windowResize(function() { 
    chart.update(); 
    d3.selectAll('#vlines') 
    .attr('x1', function (d,i) { return chart.xAxis.scale()(xgrid[i]); }) 
    .attr('y1', function (d,i) { return chart.yAxis.scale()(0); }) 
    .attr('x2', function (d,i) { return chart.xAxis.scale()(xgrid[i]); }) 
    .attr('y2', function (d,i) { return chart.yAxis.scale()(1); }); 
}); 

、あなたは簡単に、ほとんどの場合、ループを避けることができselectAllおよび機能の使用：ここにあなたの更新リサイズ機能です。