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循环来做这个，只需要使用selectAll。这是一种方法：

首先，在第 210 行的 for 循环中，我很容易地为 select 垂直线分配了一个名为 vlines 的 ID

.attr('id', 'vlines')

然后使用 selectAll 和这个 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和函数，在大多数情况下可以轻松避免循环。

NVD3 - 向堆积面积图添加多条垂直线并调整其大小

NVD3 - Adding and resizing multiple vertical lines to stacked area chart

javascript

d3.js

nvd3.js