X軸とY軸のグリッド線のD3のアライメント

Question

現在、グラフのグリッド線の設定に問題があります。

問題

i）は、Xグリッド線は

II）Yグリッド線が表示されないX軸に整列されていません。

The code and output are in the 

Plunker

誰もがこの上で私を導くことができますか？前もって感謝します。

Answer 1

I）×グリッド線がx軸に整列されていない

理由：

あなたはそれがこのようにされている必要があります。この

.attr("transform", "translate(0," + height + ")") 

のように行っています。

.attr("transform", "translate("+margin.left + "," + (height+ margin.top) + ")") 

グラフに与えられている余白の左と余白を見逃しましたので、上記のように追加してください。

ii）yグリッド線が表示されません。

理由：

svg.append("g")  
     .attr("class", "grid") 
     .call(ygridlines <--- this is a function 
      .tickSize(-width) 
      .tickFormat("") 
    ) 

また、あなたがy軸に対する変換

svg.append("g")  
     .attr("class", "grid") 
     .attr("transform", "translate("+margin.left + "," + (margin.top) + ")") 
     .call(ygridlines() 
      .tickSize(-width) 
      .tickFormat("") 
    ) 

を逃してきたはずです。

ワーキングコードhere