0

私はこのd3折れ線グラフを持っています:

http://jovansfreelance.com/bikestats/d3/tipsy.php

JS ソースはhttp://jovansfreelance.com/bikestats/d3/js/d3LineChart.jsにあります。

ページにアラートを追加して、ページの読み込み時にデータ オブジェクトにアラートが送信されるようにしました。ご覧のとおり、各年に複数の値があります。2012 年の値が 2006 年の値に接続されていないことを除いて、グラフは正常に表示されます。

基本的に、私の質問は、特定の場所でグラフを切断するにはどうすればよいですか? x 軸の値が 2012 年になるたびに、グラフを切り離す必要があります (2012 年から 2006 年までの線は表示されません)。

4

1 に答える 1

1

データの構造を変更する必要があります。今書かれているように、generateData()関数は 20 個の値を取り、それらを同じ配列にプッシュします。これにより、データ変数は次の構造を持つオブジェクトの配列になります。

data = [
  { value: "253.65", date: "2006"},
  { value: "269.67", date: 2007 },
...
];

このデータ構造により、d3 は 2006 年から 2012 年までの 1 本の接続された線を描画し、2006 年に再び 2 回描画します。

3 つの異なる行を取得するには、d3 が各シリーズを個別のオブジェクトとして認識できるように、データを分割する必要があります。次のような構造にデータを入れることを検討してください。

data = [
{
    name: "series01",
    points: [ 
        { value: "253.65", date: "2006"},
        { value: "269.67", date: 2007 },
        ...
    ]
},
{
    name: "series02",
    points: [ 
        { value: "253.65", date: "2006"},
        { value: "269.67", date: 2007 },
        ...
    ]
},
{
    name: "series01",
    points: [ 
        { value: "253.65", date: "2006"},
        { value: "269.67", date: 2007 },
        ...
    ]
}

];

もちろん、これを行う場合は、他の d3 コンポーネントを書き直して、円の x 値と y 値が各シリーズ オブジェクトの points プロパティ内にネストされているという事実に対処する必要があります。複数の線の描画について詳しくは、複数の線 d3を参照してください。

コメントへの返信として追加:

rawdata 要素を 1 つずつデータに割り当てるサイズ ループが問題です。これは、d3 がデータを処理する方法に反します。最初のループで、d3 はデータ配列の 7 つの要素に対して 7 つのパスと円に入ります。

.enter()データ配列の変更に基づいて新しい svg 要素のみを追加します。キーが使用されていない場合、変更は配列の長さによって駆動されます。ループの 2 回目と 3 回目ではデータ配列の長さが変わらないため、新しいパスは追加されません。

3 行すべてを取得するには、ループを削除し.data(rawdata)、データに を使用して、行の 'd' 属性を に変更します.attr('d', line(d.points))。

残念ながら、これは円を台無しにします。同じデータに円と線を描画する方法については、この Google グループのディスカッションで Mike Bostocks の svg:g 要素の提案をご覧ください https://groups.google.com/forum/?fromgroups=#!topic/d3-js/ 8XLzUYLoFnY

于 2013-03-31T16:49:13.730 に答える