D3線路徑交叉

Question

我正在使用D3，我遇到了一些問題。基本上，我有一個小區域圖，其域根據畫筆改變（類似於這個例子：http://bl.ocks.org/mbostock/1667367）。我創建了一條可以拖動的線，我希望做的是提供一條工具提示，其中該線與面積圖相交。我創建了一個函數，它根據線的x值平分圖表中的數據並返回最接近的數據點...問題是這並不總是與參考線對齊，特別是如果刷子已經設置得非常小，因此在面積圖中只有幾個點被插入。這是我正在談論的內容的圖像。

所以，我的問題是有可能以某種方式創建一個路徑線相交函數，它將確定兩個路徑相交的確切位置，並返回一個我可以用於工具提示的值？我目前使用的功能在...下面，但正如我所說的，當筆刷設置爲小面積時，這似乎不起作用。

function ref_move(d) { 
    var x0 = x.invert(d.x -35), 
     i = bisectDate(data, x0, 1), 
     d0 = data[i - 1], 
     d1 = data[i], 
     d = x0 - d0.date > d1.date - x0 ? d1 : d0; 

     ref_tooltip.attr("transform", "translate(" + (x(d.date) + margin.left) + "," + (y(d.Light) + light_offset) + ")"); 
    } 

我已經做了一些關於這個問題的研究，並沒有提出很多解決方案。有一個由Kevin Lindsey編寫的圖書館，可以進行某種相交測試（http://www.kevlindev.com/geometry/2D/intersections/index.htm）...但它是在9年前編寫的......並且不確定它是否仍然是最新的。此外，還有一個例子，您可以沿路徑找到一個點（http://bl.ocks.org/mbostock/1705868），但是，我想知道如何找到接近參考線的路徑上的點？有沒有人對如何解決這個問題有任何想法？提前致謝。

Answer 1

感謝您的鏈接。有趣的是通過其他方式來解決它。事實證明，我想到了......基本上使用了一些插值。你看到我知道d0和d1，它們是參考線兩側的點，它們對應於我從CSV文件中知道的數據。所以，基本上我只需要找出這兩點之間的參考線​​的位置以找出一個加權百分比......然後將這兩個權重乘以兩個已知點的y值，然後就可以得到它。我的新功能如下所示：

function ref_move(d) { 
    var x0 = x.invert(d.x -35), 
     i = bisectDate(data, x0, 1), 
     d0 = data[i - 1], 
     d1 = data[i], 
     span = (x(d1.date) - x(d0.date)), 
     weight = (x(x0) - x(d0.date))/span, 
     newy = (d1.Light * weight) + (d0.Light * (1.0-weight)); 

     ref_tooltip.attr("transform", "translate(" + (x(x0) + margin.left) + "," + (y(newy) + light_offset) + ")"); 
} 

這似乎解決了我的問題。謝謝您的幫助。如果有其他解決方法，我會很好奇。再次感謝。

Answer 2

爲KenlinDel庫我設法找到的兩條路徑的交叉點使用D3，但問題與其他形狀， 我在做實際的解決方案是

chordshapes = Array() 
svg.selectAll("g.Chords") 
    .data(data) 
    ..attr("d", function (d,i) { 
           var shape = new Path() // from D2.js 
           //get the path 
           var pathStr = chrod(innerRadius, d.source, d.target) 
           //Initialize a new path object 
           shape.parseData(pathStr) 
           chordshapes[i] = shape; 
           return pathStr; 
          }) 

所以這裏的chordShapes containes每個路徑的路徑對象， 後來當我有一個點擊，例如刷，我可以創建畫筆矩形的另一形態檢查交點如下

........ 
var intersect Intersection.intersectShapes(chordshapes[i], brushShape) 
if(intersect.points.length >0) { 
.......... 
}