D3.js 替换段落中的文本答案

【问题标题】：D3.js substitute text in a paragraphD3.js 替换段落中的文本
【发布时间】：2016-02-17 21:59:54
【问题描述】：

我想知道是否可以创建一个 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")
  })

这不起作用，因为它只会删除原始段落而不创建新段落。我试图为同一个#trigger 创建第二个“点击”事件，但这导致“删除事件”没有发生，并且新文本被附加到正文的末尾，而我希望它开启与原始段落相同。有没有更优雅的方法来解决这个问题？

此外，我是否可以在新段落中包含切换事件的超链接或单词（例如，在鼠标悬停时出现并在鼠标移出时消失的工具提示）？

【问题讨论】：

有一个父元素（例如div）包含您要删除的段落。然后你可以删除它并在同一个地方添加另一个段落。
d3.select("#triggerButton") .on("click", function() { d3.select("#myParagraph") .remove() .append("p") .attr ("id", "myNewParagrap") .select("#myNewParagrap") .append("text") .text("这是我的新文本") })

标签： javascript text d3.js buttonclick

【解决方案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")
     }

【讨论】：