【问题标题】:NVD3 Cumulative Line Chart : How to set different back ground color for specific X axisNVD3 累积折线图:如何为特定 X 轴设置不同的背景颜色
【发布时间】:2015-06-08 11:23:55
【问题描述】:

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

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

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

提前致谢。

【问题讨论】:

  • 这不是一个完整的答案,我现在没有时间将它提炼成一个,但也许可以向gist.github.com/timelyportfolio/… 寻求指导。他们正在使用带有 nvd3 的 rcharts,但我认为有足够的地方可以帮助您。您必须自己实现 drawVerticalLines 之类的东西,但您应该能够使用一般大纲。
  • This 可能会有所帮助。

标签: jquery d3.js nvd3.js linechart cumulative-line-chart


【解决方案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);

编辑

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

【讨论】:

  • 感谢您的回答,它对我来说很好用,还有一件事是我们如何为 X 轴做到这一点,或者说 .nv-x..?
  • @Vijay,查看更新后的example
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-09-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多