I want to use d3.js to interact with marked text in CodeMirror. However, to mark text in CodeMirror, you call markText(from,to, {class: 'my-class'}) and it creates a span around the text with class my-class.
I wish to mark many pieces of text based on data and then add some event handling and such to them. Thus, I would like to do something like:
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();
However, d3's enter selections only support append, insert, and select. I tried faking the effect with select already (e.g. box.enter().select(arbitraryElt).each(...)) but that didn't work.
Of course, I could just loop through my data, mark the text, and then use d3 to apply the other attributes I want, but that sort of defeats the point of using d3.
Is it possible to do this with d3 in an elegant way?
EDIT:
I realized I completely misunderstood how markText works, and thus the context of my question is invalid. However, I'm still curious if it's possible to create elements using an arbitrary function instead of append.
You can use .call for custom functions, so that would be .call(box).