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如何在内部工作。

使用自定义函数在d3.js中创建元素

2 个答案: