분산 형 플롯 구현의 고정 축

Question

일부 분산 형 플롯을 작성하기 위해 d3을 가지고 놀고 있습니다. 어떤 이유로 든 플롯에 적절한 X 축을 얻을 수 없습니다. 축에는 항상 겹치는 텍스트가 있습니다. 또한 도트는 축과 겹치는 것처럼 보입니다. 이 문제를 어떻게 해결하여 더 멋지게 보이게 할 수 있습니까?

내 시도는 jsfiddle입니다. 어떤 제안?

Answer 1

axis.ticks을 사용하면 틱 수를 줄일 수 있습니다. xAxis.ticks(5) 여기에서 잘 작동하는 것 같습니다.

도트가 축과 겹치지 않게하려면 몇 가지 옵션이 있습니다. 하나는 tickSize 또는 tickPadding을 늘릴 수 있다는 것입니다. 원은 눈금 표시와 여전히 겹치지 만 눈금 표시와 겹치지 않습니다. 다른 옵션은 원과 축 사이에 추가 공간이 있어야하도록 도메인을 확장 할 수 있다는 것입니다.

일반적으로 d3.extent (또는 단지 및 d3.max)으로 도메인을 자동으로 계산합니다. 귀하의 경우에는

// 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]); 

, 도메인을 하드 코딩하고 있기 때문에, 당신은 당신이에 하드 코딩하는지 변경할 수 있습니다 다음은 각면에 10 % 도메인을 확장하는 방법의 예 더 넓은 범위의 값.