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

维杰

我正在使用NVD3累积折线图,它非常适合我,但是我想设置不同的背景色以突出显示X轴上的某些特定小时,如下图所示。 在此处输入图片说明

或为特定零件的图形设置不同的背景在此处输入图片说明如上所示,我要为特定时间段设置不同的X轴颜色

因此,请告诉我执行此操作的任何可能方法或满足此要求的任何可能方法。

提前致谢。

标记

因此,这里有很多技巧,但是您可以解析出轴的位置并自己添加:

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);

编辑

我只是重新考虑了这一点。您可以从图表对象找回它,而不是从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);

这里的例子

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章