NVD3 - 将多条垂直线添加到堆积区域图表并调整其大小

时间:2016-05-02 16:57:30

标签: javascript d3.js nvd3.js

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

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

也许这可以在不使用循环的情况下以更多的D3方式完成? Here is a fiddle用于复制问题(第207-235行)。

2 个答案:

答案 0 :(得分:0)

我重新编写你的自定义行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

答案 1 :(得分:0)

你真的不需要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和函数,您可以在大多数情况下轻松避免循环。