NVD3累积折线图：如何为特定X轴设置不同的背景颜色

Question

我正在使用NVD3累积折线图，它对我来说非常适合，但我想设置不同的背景颜色以突出显示X轴上的某个特定小时，如下图所示。

或者为特定部分设置不同的背景图 如上所示，我想在特定时间段设置不同的X轴颜色。

所以请告诉我任何可能的方法来做这个或任何可能的方式来满足这个要求。

提前致谢。

Answer 1

所以，这里非常大，但你可以解析轴的位置并自己添加：

var startTick = 1,
      endTick = 3;
  var x1 = parseFloat(d3.select(d3.selectAll('.nv-x .tick')[0][startTick]).attr('transform').split("(")[1]);
  var x2 = parseFloat(d3.select(d3.selectAll('.nv-x .tick')[0][endTick]).attr('transform').split("(")[1]);
  d3.select('.nv-y .tick')
    .append('line')
    .attr('x1', x1)
    .attr('x2', x2)
    .style('stroke', 'black')
    .style('stroke-width', 10);

<强> EDITS

我只是想到了这一点。您可以从图表对象中取回它，而不是从DOM中解析位置。这种方式更清洁：

var x1 = chart.xScale()(1122782400000);
var x2 = chart.xScale()(1251691200000);
var height = chart.yAxis.range()[0];

// line on x-axis
d3.select('.nv-y .tick')
  .append('line')
  .attr('x1', x1)
  .attr('x2', x2)
  .style('stroke', 'black')
  .style('stroke-width', 10);

// shaded background
d3.select('.nv-y')
  .append('rect')
  .attr('x', x1)
  .attr('width', x2 - x1)
  .style('fill', 'steelblue')
  .style('opacity', 0.2)
  .attr('y', 0)
  .attr('height', height);

示例here。