javascript - d3.extent 在使用约束松弛绘制时在 x 轴和图形的点标签之间产生碰撞

Question

我有一个散点图，它使用约束松弛来消除它绘制的点的标签冲突 ( Plunker here )。问题是，当我放松约束时，这会导致点标签和 x 轴标签之间发生冲突。轴是使用 d3.extent 和 d3.scale.linear 生成的。

我试图通过延长 y 轴的长度来消除点标签和 x 轴的冲突，但我最接近的实现方式是更改 0 的原始值 到 30 在以下节中:

var yext = d3.extent(data, d => d[1]);
var sy = d3.scale.linear()
  .domain(yext)
  .range([height, 30]) // flip y-axis
  .nice();

结果不太理想，在 x 轴和 y 轴之间留下了一个尴尬的间隙而不是交点:

我想要实现的是这样的:

(除非我想通过代码而不是 Photoshop 来实现)。

任何人都可以演示解决方案吗？ ( Plunker here )

Answer 1

为什么不在域中添加填充？喜欢:

.domain([yext[0] * 0.95, yext[1] * 1.05])
//less here---------^-- more here----^

这是该解决方案的 plunker:http://plnkr.co/edit/rKArjn7DwQa9g1X5CaNW?p=preview