javascript - d3.jsでズームとドラッグに対応したグリッド線を追加

Question

既存のコードにグリッド線を追加しようとしていますが、多くのチュートリアルを見てきましたが、ズーム可能でドラッグ可能なグリッド線はありません。

私の既存のコードの削除されたバージョンはここにあります:

私はスケールが必要であることを理解しています:

this.x = d3.scale.linear()
  .domain([this.options.xmin, this.options.xmax])
  .range([0, this.size.width]);

そして後で描きます。しかし、方法がわかりません。

ズームすると「変化」する垂直グリッド線が必要であり(例: 10-20-30-40 から 10-15-20-25 に移動)、グラフをドラッグすると移動します。どうやってやるの？

score 0 · Accepted Answer

この例のようなことができると思います：

次に、制限を追加します。特定のしきい値を超えると、軸の目盛りラベルが増減します。（少なくとも、それは私が今フォースレイアウトでやろうと計画していることです）.

または、ラベルを範囲の関数にすることをお勧めします。たとえば、 min + n*(min-max)/4 のラインに沿ったものです。ここで、 n は目盛りラベル {1,4} です。

1 に答える 1