如何檢測d3.js中的元素拖動力有向圖

我在d3.js中有一個強制有向圖（Brilliant：對MB和所有涉及的巨大榮譽！）。我想以某種方式能夠檢測，並返回當前正在拖動的任何節點的索引。如何檢測d3.js中的元素拖動力有向圖

我知道我可以重新定義d3.behavior.drag（）來附加一個回調到拖動事件，但我想要所有的本地force.drag的行爲，並且它似乎笨拙地重複它只是爲了添加這個一點點。在我缺乏經驗的情況下，也許我忽略了一些簡單的方法來做到這一點？

嗯，是的，我應該更加明確。這就是我的嘗試：我已經使用here作爲我的模型，將其修改爲適合我的目的，並且隨着我學習d3.js。因此，我所定義的節點：

var circle = svg.append("svg:g").selectAll("circle") 
    .data(force.nodes()) 
    .enter().append("svg:circle") 
    .attr("class", "node") 
    .attr("r", 6) 
    .on("click", clicked) 
    .on("dblclick", dblclick) 
    .on("contextmenu", cmdclick) 
    .on("drag", draghandler) 
    .call(force.drag); 

function draghandler(d){ 
    console.log(d); 
    console.log(this); 
}

我的事件處理程序click，dblclick和contextmenu，工作完全如我所料;但是，當我嘗試爲drag添加事件處理程序時，它從不執行。我想象它是失敗的，因爲我錯誤地使用了它，或者在錯誤的地方，或者因爲行爲受到force.drag的控制，我將不得不重新定義，以增加我想要的額外行爲。

來源

2015-04-12 jjon

執行此操作的方法是在'drag'事件處理程序中執行此操作。這不涉及重新定義。 –

非常感謝@LarsKotthoff，這是我的第一個想法，但顯然我做錯了。增加了進一步的論述。 – jjon

我認爲在這種情況下，事件是'force.drag'。 –

的drag事件不是由circle發射，它是由拖拽行爲（source）發射，呼籲force.drag將返回的行爲，你可以設置一個偵聽器有：

force.drag() 
    .on("dragstart", function() { 
    console.log(arguments); 
    })

Demo，看到控制檯的輸出

更新：

我分叉您發佈的例子鏈接不使用d3.json，它的做工精細：demo

來源

2015-04-13 17:44:14

非常感謝Mauricio，這是照亮的，看起來很有希望;但是，您在'd3.json（）'回調的上下文中調用'force.drag（）'。在MBs例子中，這是我的模型，不使用'd3.json（）'。如果我在我的上下文中嘗試了腳本的全局級別，則會得到：未定義的''未捕獲的TypeError：無法讀取屬性''。我在哪裏可以調用'force.drag'來設置該監聽器？ – jjon

你應該在變量'force'創建後設置它，我已經更新了我的答案 –

你的答案既明亮又正確;不過，我一直無法複製你的成功。爲了說明我的問題，我將我的代碼複製到[jsfiddle]（https://jsfiddle.net/jjon/tuqc31zt/），只是發現你的解決方案在那裏完美工作。然而，在本地，我仍然會遇到以下錯誤： 'TypeError：this [type] is undefined d3.v2.js：3005' 'TypeError：path is undefined force-directed-edges.html：274' 進一步我已經把頁面[在這裏]（http://neolography.com/force-directed-edges.html），在我的瀏覽器中，它失敗。有任何想法嗎？ – jjon

如何檢測d3.js中的元素拖動力有向圖

回答

相關問題