14

私は次のようにd3.jsで折れ線グラフを作成しています：

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

次に、次のようにラインデータポイントにドットを配置します。

var points = svg.selectAll(".point")
        .data(cities1[0].values)
      .enter().append("svg:circle")
         .attr("stroke", "black")
         .attr("fill", function(d, i) { return "black" })
         .attr("cx", function(d, i) { return x(d.date) })
         .attr("cy", function(d, i) { return y(d.temperature) })
         .attr("r", function(d, i) { return 3 });

結果は私が期待するものではありません：

ここに画像の説明を入力してください

次に、interpolate（ "basis"）をinterpolate（ "cardinal"）に変更して、必要なものを取得します。

ここに画像の説明を入力してください

なぜ私は根拠で間違った結果を得たのですか？どうすれば基礎を使って正確な点を描くことができますか？

編集：同様の（未回答の）質問。このjsfiddleをチェックしてください。これは、補間を基本モードからカーディナル（またはその他の）モードに変更した場合にのみ機能します。しかし、枢機卿には、グラフの最大の高さを尊重しないという問題があります。私が探しているのは、いくつかの補間モードがポイントを正しい場所に配置できない理由（および枢機卿が最大の高さを尊重しない理由）についての説明です。

4

2 に答える 2

12

残念ながら、これは「基本」補間の特性です。線は必ずしもポイントを通過するとは限りません。これを「修正」する方法はありません。この特定の補間がどうしても必要な場合を除いて、ポイントを正しく取得できる補間を使用してください。

線が通る点にアクセスし、それに応じて円を追加するカスタム補間を実装できます。ただし、これには、d3とライン補間器がどのように機能するかについてのある程度深い知識が必要になります。

于 2012-12-26T15:41:58.787 に答える
0

'basis'補間は、データポイント間に平均線を作成することを理解しています。枢機卿は、すべての点を結ぶ滑らかな線を作成します。

于 2016-02-25T19:16:46.723 に答える