javascript - 散布図実装の軸の固定

Question

散布図を作成するために d3 をいじっています。何らかの理由で、プロットの適切な X 軸を取得できません。軸には常にテキストが重なっています。また、ドットは軸と重なっているように見えます。これをより美しく見せるにはどうすれば修正できますか？

私はjsfiddleを試してみました。助言がありますか？

Answer 1

axis.ticksを使用して、ティックの数を減らすことができます。xAxis.ticks(5)ここではうまくいくようです。

ドットが軸と重ならないようにするには、いくつかのオプションがあります。1つは、 tickSizeまたはtickPaddingを増やすことができるということです。円は目盛りと重なりますが、目盛りラベルとは重なりません。もう1つのオプションは、ドメインを増やして、円と軸の間に追加のスペースを強制することです。

通常、ドメインはd3.extent（またはd3.minとd3.maxのみ）を使用して自動的に計算します。ドメインを両側で10％拡張する方法の例を次に示します。

// First set the domain automatically from the data.
var x = d3.scale.linear().domain(d3.extent(numbers));

// Then extend the domain using invert (with the default range [0, 1]).
x.domain([-.1, 1.1].map(x.invert));

// Lastly set the desired range.
x.range([0, width]);

あなたの場合、ドメインをハードコーディングしているので、ハードコーディングしているものをより広い範囲の値に変更することができます。