d3 - 看看什麼是在特定的x，y位置

我想在d3樹中實現一些拖放功能，當節點被拖動時，如果它是直接在節點左邊的50像素，我想繪製一個虛線的連接器來表明如果你釋放的節點應該在這裏作爲一個孩子移動。d3 - 看看什麼是在特定的x，y位置

爲了做到這一點，我的想法是，我檢查左邊50個像素是什麼元素。有沒有辦法查看d3中特定x，y位置的內容？我試過的是在dragmove期間檢查這個。

document.elementFromPoint(d3.event.x, d3.event.y);

但是，這隻返回svg元素。 d3或其他想法有沒有類似的方法？

-Tim

來源

2013-05-16 Tim

可能相關：[this]（http://stackoverflow.com/questions/5396657/event-when-two-svg-elements-touch），[this]（http://stackoverflow.com/questions/2174640/hit-testing-svg-shapes）和[this]（http://stackoverflow.com/questions/12647101/how-to-determine-nearby-svg-elements-on-a-mouse-event） – explunit

Just curious如果你發現這個解決方案 – explunit

謝謝你的建議。我採取了你的方法。 – Tim

我想你基本上有碰撞/交叉點檢測問題要解決。正如我在上面發佈的鏈接中提到的那樣，在SVG或D3中這樣做的可靠方式似乎存在不一致的瀏覽器支持。

但是，在您的樹示例中，解決此問題的一種方法（技巧1從this answer）是圍繞與節點相同的x，y座標繪製較大的透明圓。然後，您可以檢測這些事件上的鼠標懸停事件並繪製臨時連接器以顯示用戶。

我這裏的此工作示例： http://bl.ocks.org/explunit/5603250

的關鍵部分被繪製較大透明節點，然後檢測在其上的鼠標懸停事件：

node.append("circle") 
    .attr("r", 60) 
    .attr("opacity", 0.0) // change this to non-zero to see the target area 
    .on("mouseover", overCircle) 
    .on("mouseout", outCircle)

的代碼的其餘部分僅僅是邏輯圍繞拖動和跟蹤源/目標隨着事物的移動。

我不確定這是否比this answer的技巧2好得多，但是您的問題讓我好奇嘗試這種方法。

來源

2013-05-18 04:46:34 explunit

d3 - 看看什麼是在特定的x，y位置

回答

相關問題