NVD3 - 將多條垂直線添加到堆疊面積圖並將其調整大小

Question

我試圖向堆疊面積圖添加多條垂直線。

使用for循環（可能不是最好的方法）添加多行。問題是，在使用nv.utils.windowResize()更新行時，for-loop似乎不工作 - 最後只有最後一行被更新。

也許這可以在不使用循環的情況下以更多的D3方式完成？ Here is a fiddle用於再現問題（第207-235行）。

Answer 1

我重新編寫自定義線在本質上多一點d3 -ish（使用數據綁定，沒有明確的循環，等...）

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-loop來做到這一點，只需使用selectAll即可。這裏有一種方法：

首先，可以輕鬆地選擇垂直線給我分配他們的ID叫vlines，在for循環上線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和功能，你可以很容易地避免在大多數情況下循環。