Выделите текст события d3.js

Question

не эксперт в d3.js, огляделся, не могли найти/понять, как достичь этого:

<p class='my-text'> Hi! this is a paragraph!</p> 

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

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

Спасибо за чтение!

Answer 1

Интересный вопрос. Я боюсь, что d3 не может сделать ничего уникального, чтобы сделать эту работу именно так, как вы себе представляете, но есть некоторые методы в стандартном Javascript API, которые могут помочь.

Метод документа или окна возвращает выделенный текст с информацией о том, где он находится в дереве документа, как selection object. Однако обратите внимание, что он не поддерживается в IE8 или ниже.

Работая оттуда и используя метод .splitText() и другие основные функции Javascript, можно вставить плавающий редактируемый элемент <div> (или текст ввода) в точке выделенного текста.

В этой скрипке, я отмечаю точку в исходном тексте, который относится к комментарию с красной звездочкой, который показывается при наведении курсора или отредактировать комментарий:

http://fiddle.jshell.net/5sT7t/3/

Код ключа:

function checkSelection(d,i) { 
    var sel = document.getSelection(); 

    if (sel.isCollapsed) return; 
     // The selection doesn't have any content, 
     // i.e., it's just the cursor location, 
     // so don't do anything. 

    var commentBox = document.createElement("div"); 
    var commentMarker = document.createElement("span"); 
    //create new elements, not currently attached to anything 

    d3.select(commentBox) 
     .attr("class", "commentBox") 
     .datum(sel.toString()) //save for later reference?? 
     .text("Comment on \"" + sel.toString() + "\"") 
     .attr("contentEditable", "true") 
     .on("mouseup", stopEvent) 
     .on("keyup", stopEvent); //don't trigger comments within comments! 

    d3.select(commentMarker) 
     .attr("class", "commentMarker"); 

    var split = sel.anchorNode.splitText(sel.anchorOffset); 
    //split the text node containing the start of the selection 
    //into two text nodes, and save the second one 

    sel.anchorNode.parentNode.insertBefore(commentMarker, split); 
    sel.anchorNode.parentNode.insertBefore(commentBox, commentMarker); 
    //insert the comment marker into the paragraph just before 
    //the split point; insert the box just before the marker; 
    //order is important, so that the marker's CSS can be 
    //dependent on the box's hover/focus state 

    sel.anchorNode = split; 
    sel.anchorOffset = 0; 
    //shift the selection to only include content after the split 
    //(this doesn't actually work...) 
} 

Чтобы попытаться найти что-то поближе к тому, что вы просили, я заменил звездочку длинным блоком, действуя как «линия». Однако нет возможности легко установить ширину этого блока для заполнения пробела из произвольной точки в тексте в поле комментариев на границе, поэтому мне пришлось перерегулировать, а затем использовать оболочку, чтобы скрыть переполнение. Высота строки также не соответствует, если есть несколько комментариев, что заставляет поля комментариев больше не выстраиваться в линию с текстом, к которому они прикреплены. Но это то, с чем вы можете поиграть:
http://fiddle.jshell.net/5sT7t/4/