この例に基づいて、D3 で複数系列の折れ線グラフを作成したいと考えています。私の問題は、いくつかの値が欠落していることです:
y x1 x2 x3
1 0.8 0.7
2 0.9 0.7
3 0.9 1.2 0.7
4 1.1 0.7
5 0.8 1.1 2.7
6 0.9 1.2 2.6
7 1.3 0.8
次のチャートを取得したい：
最初または最後に欠けている点は除外する必要があります。私はそれを達成することができました
d3.svg.line().defined(function (d) { return d.value; }
ただし、ライン内でいくつかのポイントが欠落している場合、ラインが中断されるべきではありません。緑の線 (x1) の上のコードでは、y=3 で停止し、y=5 で続きます。しかし、私はそれらのポイントを接続したいと考えています。
を使用しないとline().defined()、欠落しているすべてのポイントは、値が であるかのように処理されました0。
これがコードです。私はその機能を実装する方法を見つけるために使用しました：
凡例とツールチップに値を表示する必要があり、計算された値をここに表示できないため、チャート関数に渡す前にデータ配列の欠落したポイントを置き換えることは解決策ではないと思います。たとえば、マウスを y=4 の上に移動するとx1:-- x2:1.1 x3:0.8、凡例に表示されるはずです (x1 には値がありません)。また、(実際の) ポイントは円として表示されます。また、メモリ内に 2 つのデータ テーブルを保持したくありません (1 つは実際の測定データを含み、もう 1 つはチャート ラインの拡張データを含みます)。