javascript - 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")
  })

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

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

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")
     }