我有一个散点图,该散点图使用约束松弛来使它所绘制的点的标签冲突(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轴之间的交点:
javascript - d3.extent在使用约束松弛进行绘制时会在x轴和图形的点标签之间产生碰撞-LMLPHP

我想要实现的是这样的:
javascript - d3.extent在使用约束松弛进行绘制时会在x轴和图形的点标签之间产生碰撞-LMLPHP

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

谁能证明解决方案? (Plunker here

最佳答案

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

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


以下是具有该解决方案的插件:http://plnkr.co/edit/rKArjn7DwQa9g1X5CaNW?p=preview

09-25 17:43
查看更多