如何在图表中添加高亮标记/区域？

Question

我有一个使用D3 js创建的时间序列图表.我想为某些时间间隔添加突出显示区域,以显示在特定时间内发生的某些活动(将有不同类型的活动,因此每个突出显示标记将根据其类型具有不同的颜色).我希望这个高亮区域从上到下垂直覆盖整个图表.

这是一个示例:

我遇到了这个问题,它展示了如何使用highcharts来做到这一点.

截至目前,我使用另一个图表库,每当我想要显示这样的高亮区域时,我就绘制一个区域图.有没有更好的方法来使用d3 js或我应该绘制一组面积图？

Answer 1

我曾经看过这个问题.比如说时间.

您可以将面积和折线图组合在一起.

// y.domain()[1] so area is drawn to cover all chart
var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.x_axis); })
    .y0(height)
    .y1(function(d) { return y(y.domain()[1]); });

var line = d3.svg.line()
    .x(function(d) { return x(d.x_axis); })
    .y(function(d) { return y(d.y_axis); });

以下是AAPL股票图表的示例,其中突出显示了2012-04-13至2012-04-17.

http://vida.io/documents/TzcZJX4itBebKciQZ

完整代码:

https://gist.github.com/dnprock/dea634bfdb3c33149c61