D3.js заменить текст в абзаце

Question

Мне было интересно, могу ли я создать функцию D3, которая выбирает абзац, удаляет текст в нем и добавляет какой-то новый текст. Если да, то какой был бы лучший способ сделать это?

Я пытался что-то вроде

d3.select("#triggerButton") 
    .on("click", function() { 
    d3.select("#myParagraph") 
     .remove() 
     .append("p") 
     .attr("id", "myNewParagrap") 
     .select("#myNewParagrap") 
     .append("text") 
     .text("This is my new text") 
    }) 

Это не работает, как это только удаляет исходный пункт, не создавая новый. Я попытался создать второе событие «на клик» для того же # триггера, но это привело к тому, что «удалить событие» не произошло, и новый текст был прикреплен к концу тела, в то время как я хотел бы, чтобы это было сверху, как исходный абзац. Есть ли более элегантный подход к этой проблеме?

Кроме того, могу ли я включить в гиперссылки или слова нового абзаца, которые переключают событие (например, всплывающая подсказка, которая появляется при наведении курсора мыши и исчезает при выводе мыши)?

Answer 1

Вы можете обернуть элемент абзаца в div, а затем добавить и удалить абзац из этого элемента div. См. Рабочий plnkr here. Надеюсь, поможет.

function removeDiv() { 
     d3.select("#removablediv").remove(); 
     d3.select(".example") 
     .append("p") 
     .attr("id", "myNewParagrap") 
     .append("text") 
     .text("This is my new text") 
    }