javascript - 散点图实现的固定轴

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

在您的情况下，由于您正在对域进行硬编码，因此您只需将硬编码的内容更改为更广泛的值。