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

Question

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

一切正常，除了使用 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 。