修复散点图实现的轴

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

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