ズーム/ドラッグ時のd3.jsグリッド線の拡大/縮小

Question

昨日d3.jsを使い始めました。

今のところ私は2つのy軸を持つチャートを作成しました。それぞれの値はいくつかの値を示し、x軸は日付を示しています。

y軸の値をクリックすると、対応する水平グリッド線が表示されます。

私の問題は、ズームやアウト、またはドラッグすると、グリッド線（水平と垂直）が軸の値に合わせて正しく縮尺されないということです。

私は今日の午後に多くの検索を行い、いくつかの例を見つけましたが、それらのどれもすでに持っているコードでは動作しません。

全体のことのためにthis fiddleを参照してください私は、ロジックは、ズーム動作に追加することを、推測が、私は確か

// x axis gridlines 
function make_x_gridlines() { 
    return d3.axisBottom(x) 
     .ticks(5) 
} 


// add the X gridlines 
let xGrid = svg.append("g") 
    .attr('class', 'grid')  
    .attr("id", "grid") 
    .attr("transform", "translate(0," + height + ")") 
    .call(make_x_gridlines() 
     .tickSize(-height) 
     .tickFormat("") 
) 

//zoom behavior 
function zoomed() { 
    .. some behavior .. 

    //redraw gridlines here? 

    .. some behavior .. 
} 

ありませんよ。

z軸でなくても、2番目のy軸（right）zAxisを呼び出しました。

ヘルプは本当に大変感謝しています。

Answer 1

ズームすると軸が機能しています。関数zoomed()では、スケールを更新しているからです。

グリッドをズームするには、スケールを更新するだけで済みます。このコードを関数zoomed()の中に入れてください。

xGrid.call(
    d3.axisBottom(x) 
     .scale(d3.event.transform.rescaleX(x)) 
     .ticks(5) 
     .tickSize(-height) 
     .tickFormat("") 
    ) 

これで、このスケール更新を他のすべてのグリッドに複製するだけで済みます。申し訳ありませんが、私はあなたに完全な答えを与えることはできませんでしたが、今は時間がありません。

---

さて、私の意見では、それは本当に簡単ですので、あなたは、機能make_gridlines()を持つべきではない、とあなたは別の場所でのアップデートの多くに取り組んでいるとき、それは私を混乱させる。

make_gridlines()を呼び出す代わりにd3.axisBottom(x).ticks(5)を呼び出します。

（私はD3とJSに新たなんだので、私は私の小さな経験と知識に基づいてこれを推薦してることに注意してください）魔法のように