Question

我试图在堆积区域图表中添加多条垂直线。

使用for循环实现添加多行（可能不是最好的方法）。问题是，使用nv.utils.windowResize()更新行时，for循环似乎不起作用---最后只有最后一行被更新。

也许这可以在不使用循环的情况下以更多的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循环中为它们分配了一个名为vlines的id

.attr('id', 'vlines')

然后使用带有此id的selectAll更新resize上的行。这是您更新的调整大小功能：

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 - 将多条垂直线添加到堆积区域图表并调整其大小

2 个答案: