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

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