やりたいこと:Heatmapチャートにある軸のラインと目盛を非表示にしたいです
解決1:cssで軸のライン(path)と目盛(line)を非表示
- d3.axisで作成した軸にライン(path)と各目盛(line)エレメントがあります
- x/y軸のラインのエレメントは「path」、各目盛のエレメントは「line」なので、cssでこれを非表示します
.axis path, .axis line{ display: none ; }
解決2:d3のセレクトで軸のライン/目盛を消去(remove)します
- d3で軸のラインエレメント(path)、目盛のエレメント(line)を選択して、消去(remove)します
svg.select(".x.axis path").remove(); svg.select(".y.axis path").remove();
軸の外側にある目盛文字をチャートと距離調整(tickSizeInner)
- 軸のライン/目盛が非表示したので、目盛の文言がチャートとの間の隙間が広がることがあります。これをd3.axisのプロパティ(tickSizeInner)で調整したほうが良いでしょう
- d3.axisに「tickSizeInner」プロパティがあります、その値(例:0)を調整すればよいです
var xAxis = d3.axisBottom(xScale).tickSizeInner(0); var yAxis = d3.axisLeft(yScale).tickSizeInner(0) ;