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

【问题标题】：How to add a highlight mark/area to a chart?如何在图表中添加高亮标记/区域？
【发布时间】：2013-10-07 21:53:18
【问题描述】：

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

这是一个示例：

我遇到了this question，它展示了如何使用 highcharts 进行操作。

到目前为止，我使用另一个图表库，并且每当我想显示此类突出显示区域时，我都会绘制一个面积图。有没有更好的方法来使用 d3 js 或者我应该画一组面积图？

【问题讨论】：

标签： javascript charts d3.js

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

以下是 2012 年 4 月 13 日至 2012 年 4 月 17 日的 AAPL 股票图表示例。

http://vida.io/documents/TzcZJX4itBebKciQZ

完整代码：

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

【讨论】：

嘿 Phuoc，vida.io... 不错！
Phuoc Do，链接不再显示代码，您可以在这里发布完整的代码吗？
嗨，阿米特，我将代码添加到要点。 vida.io 链接下方的链接。