節點上的d3事件處理程序不在HTML DOM中

Question

我使用模板系統返回由d3代碼生成的SVG代碼。 （有關信息，請參閱d3 issue如何執行此操作）

一切正常，但使用d3的on方法設置的事件偵聽器除外。它們不會被添加到DOM樹中。

下面是一個不起作用的簡單代碼示例。如果d3直接修改現有的DOM樹，則一切正常（取消註釋行3而不是1和2）。

任何想法要改變這個工作？

svg = d3.select(document.createElement('div')); 
svg 

//d3.select('body') // if you use this line INSTEAD of the first two, everything works as expected 

.append("div")  
.append("div") 
.text('Text') 
.on('mouseover', function() { alert('Test'); }); 

//alert(svg.node().innerHTML); 
$("body").html(svg.node().innerHTML); 

JSFiddle

Answer 1

不同的是，在一個情況下，你在頁面的DOM充當一個元素上尚未：svg = d3.select(document.createElement('div'));

雖然對你的行爲的元素已經在其他頁面svg = d3.select('body')

D3無法將偵聽器添加到不在DOM中的東西。

看看這個JSFiddle，我在頁面中添加div後添加mouseover。