title: Use custom function to create elements in d3.js
body: <p>I want to use d3.js to interact with marked text in CodeMirror. However, to mark text in CodeMirror, you call <code>markText(from,to, {class: 'my-class'})</code> and it creates a span around the text with class <code>my-class</code>.</p>
  
  <p>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:</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>However, d3's enter selections only support <code>append</code>, <code>insert</code>, and <code>select</code>. I tried faking the effect with <code>select</code> already (e.g. <code>box.enter().select(arbitraryElt).each(...)</code>) but that didn't work.</p>
  
  <p>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.</p>
  
  <p>Is it possible to do this with d3 in an elegant way?</p>
  
  <p>EDIT:</p>
  
  <p>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.</p>