Фиксирующая ось реализации разброса графика

Question

Я играю с d3, чтобы построить несколько участков рассеяния. По какой-то причине я не могу получить правильную ось X для моего сюжета - ось всегда имеет некоторый перекрывающий текст. Кроме того, точки, похоже, перекрываются с осью. Как я могу исправить это, чтобы выглядеть лучше?

Я пробовал jsfiddle. Какие-либо предложения?

Answer 1

Вы можете использовать axis.ticks для уменьшения количества тиков; xAxis.ticks(5), похоже, хорошо работает здесь.

Чтобы остановить точки от перекрытия осей, у вас есть несколько вариантов. Во-первых, вы можете увеличить tickSize или tickPadding. Кружки все равно будут перекрывать метки, но они не будут перекрывать метки меток. Другой вариант заключается в том, что вы можете увеличить свой домен, чтобы занять там дополнительное пространство между кругами и осью.

Обычно вы автоматически вычисляете домен с помощью 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]); 

В вашем случае, так как вы закодировав домен, вы можете просто изменить то, что вы закодировав к более широкий диапазон значений.