d3.js - d3.jsを使用して折れ線グラフの軸のスケールを変更するには?

Question

一度に 20,000 以上の値を表示できるように、折れ線グラフの X 軸のスケールを変更したいと考えています。これで私を助けてください。折れ線グラフには 2 つの列 (ID と TIME) があります。ID 値は 1、2、3 などで、20132 まで続きます。TIME 値は 0 から 525 まで変化します。これらの値で折れ線グラフを描画できません。軸のスケールを変更する方法を教えてください。

Answer 1

折れ線グラフを描画できないのはどのような場合ですか? D3s の組み込みスケール関数を使用して、x 軸をデータの関数にすることができます。詳細なガイドラインについては、このチュートリアルを参照してください。

編集：

それでは、変数にデータが格納されているとしましょうdata。何よりもまず、SVG コンテナーに合わせて各データ値を再計算するスケールが必要です。例えば：

var x = d3.scale.linear()
    .domain([0, d3.max(data, function (d) { return d.id; })]) //Convert the id-values...
    .range([0, 960]); //...to a range from 0 to 960.

次のステップは、次のように、スケールの範囲からデータを取得する軸を構築することです。

var xAxis = d3.svg.axis().scale(x);

最後の (まあ、その後のいくつかの必須のスタイリングを除いて) ステップは、軸を SVG コンテナーにリンクすることです。コンテナに名前を付けたとしましょうsvg。それで：

svg.append('g')
  .attr("class", "axis")
  .call(xAxis);