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)將第一兩個點比I」之間的距離更小d期望，他們不應該重疊。我錯過了什麼嗎？

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無論實際重疊，點實際上會比他們隔開更多需要。