D3：我使用scale.invert（）错了吗？

Question

我使用D3来构建时间轴。在我提供的一些数据中，事件彼此非常接近，因此它们在可视化中重叠，就像这个简化示例中的前两个点一样：

我天真地试图通过检查基础数据点与其邻居可能重叠并在必要时添加点的宽度来避免这种情况：

for(var i = 1; i<dataset.length;i++){
  if((xScale(dataset[i])-xScale(dataset[i-1]))<(2*dotRad)){
    dataset[i]+=xScale.invert(2*dotRad);
  }
}

但是，如this fiddle所示，xScale.invert(2*dotRad)增加了前两个点之间的距离，而不是我预期的，它们不应该重叠。我错过了什么吗？

Answer 1

您的代码无法正常工作，因为比例会为您提供一个位置，而不是位置之间的差异。也就是说，在反转时，您需要获取特定像素位置的数据，而不是两个像素位置之间的差异。计算新位置更安全（以像素为单位，通过添加偏移量），然后将其反转：

for(var i = 1; i<dataset.length;i++){
  var diff = xScale(dataset[i]) - xScale(dataset[i-1]);
  if(diff < 2*dotRad) {
    var add = 2 * dotRad - diff;
    dataset[i] = xScale.invert(xScale(dataset[i]) + add);
  }
}

完整演示here。

您的代码将在特殊情况下工作，其中域和范围以0开头（请参阅here），但在您添加2 * dotRad时，无论实际重叠如何，实际上，点的间距将超出它们的需要。