Используйте пользовательскую функцию для создания элементов в d3.JS

Я хочу использовать 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();

Тем не менее, выбор enter d3 поддерживает толькоappend, insert, и select. Я уже пытался имитировать эффект с помощью select (например, box.enter().select(arbitraryElt).each(...)), но это не помогло работа.

Конечно, я мог бы просто пройтись по своим данным, отметить текст, а затем использовать d3, чтобы применить другие атрибуты, которые я хочу, но это разрушает смысл использования d3.

Можно ли сделать это с d3 элегантным способом?

Правка:

Я понял, что совершенно неправильно понял, как работает марктекст, и поэтому контекст моего вопроса недействителен. Однако мне все еще интересно, можно ли создавать элементы с помощью произвольной функции вместо добавления.
2 2
javascript d3.js codemirror

2 ответа:

Вы можете использовать .call для пользовательских функций, так что это будет .call(box).

2

Можно также использовать insert(), но не произвольные функции. Проблема в том, что элементы в выборе enter() на самом деле еще не существуют (т. е. нет соответствующих элементов DOM). Поскольку нет элементов DOM, вы не можете оперировать ими.

Более подробная информация вдокументации . Вы, конечно, можете реализовать свою собственную пользовательскую функцию для обработки элементов enter(), но для этого потребуется довольно много знаний о том, как d3 работает внутри.

0