2

D3 js を使用して作成された時系列グラフがあります。特定の時間間隔で特定のアクティビティが発生したことを示すために、特定の時間間隔のハイライト エリアを追加したいと考えました (アクティビティにはさまざまな種類があるため、各ハイライト マークはその種類に基づいて異なる色になります)。このハイライト エリアでチャート全体を上から下まで垂直にカバーしたいと考えています。

以下にサンプルを示します。 ここに画像の説明を入力

ハイチャートを使用してそれを行う方法を示すこの質問に出くわしました。

現在、私は別のグラフ作成ライブラリを使用しており、そのようなハイライト エリアを表示したいときはいつでも面グラフを描画しています。d3 jsを使用してそれを行うより良い方法はありますか?それとも一連の面グラフを描画する必要がありますか?

4

1 に答える 1

5

私はこの質問を一度見ました。たとえば時間。

面グラフと折れ線グラフを組み合わせることができます。

// 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/dnpock/dea634bfdb3c33149c61

于 2013-10-07T22:38:34.607 に答える