9

更新:これは問題の例です - http://jsfiddle.net/Hffks/2/

D3 を使用して折れ線グラフをコーディングしようとしていますが、私の線は最後に閉じられています。つまり、最初と最後の点が同じである閉じたパスとして機能します。私のデータは次の JSON 形式です。

[ entityA : [ { time : 1230000,  // time since epoch
             attribute1 : 123 // numeric value 
             attribute2 : 123 // numeric value
            },
              { time : 1230010,  // time since epoch
              attribute1 : 123 // numeric value 
              attribute2 : 123 // numeric value
            } ],
  entityB : [ { ... // same format as above
  ...
 ]

私は行の標準宣言を使用しています (x と y の関数を含む d3.svg.line):

var line = d3.svg.line()
        .x(function(d) {
            return x_scale(d.c_date)); 
        })
        .y(function(d) { 
            return y_scale(d.total); 
        });

次に、エンティティを反復処理する for ループ内に、「svg:path」を追加します。

canvas.append("svg:path")
            .attr("d", line(data[entity]))

グラフに関する他のすべての機能: ポイントが正しく配置されている、エンティティごとに複数の独立した線がある、軸が描画されているなど。ただし、各独立した線は閉じたパスとして機能します。

助けてくれてありがとう！

4

2 に答える 2

22

パスはデフォルトで入力されます。fill「なし」と「黒」に設定するstrokeと、パスが閉じられていないことがわかります。閉じているように見えます。

ワーキングフィドル： http： //jsfiddle.net/Hffks/3/

于 2012-12-03T14:51:34.360 に答える