使用自定義函數在d3.js中創建元素

Question

我想使用d3.js與CodeMirror中的標記文本進行交互。但是，要在CodeMirror中標記文本，請致電markText(from,to, {class: 'my-class'})，並在類別my-class的文本上創建一個範圍。

我希望根據數據標記許多文本，然後添加一些事件處理等。因此，我想這樣做：

var box = d3.selectAll('box').data(myData); 
box.enter().each(function(d) {cm.markText(from(d), to(d), {class: 'box'});}) 
box.on('mouseover', function(d) {...}); 
box.exit().remove(); 

然而，D3的輸入選擇只支持append，insert和select。我試圖假裝select（例如box.enter().select(arbitraryElt).each(...)），但沒有奏效。

當然，我可以循環訪問我的數據，標記文本，然後使用d3應用我想要的其他屬性，但是這種方式會破壞使用d3的要點。

是否有可能以優雅的方式與d3做到這一點？

編輯：

我意識到我完全誤解markText是如何工作的，因此我的問題的情況下是無效的。但是，我仍然很好奇，如果可以使用任意函數而不是附加來創建元素。

Answer 1

對於自定義功能，您可以使用.call，因此將會是.call(box)。

Answer 2

您也可以使用insert()，但不是任意函數。問題在於enter()選擇中的元素還沒有真正存在（即沒有相應的DOM元素）。由於沒有DOM元素，因此無法對它們進行操作。

更多信息請登陸the documentation。您當然可以實現您自己的自定義函數來處理enter()元素，但這需要關於d3如何在內部工作的一些知識。