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创建第二个“on-click”事件，但是这导致“删除事件”没有发生，新文本被附加到正文的末尾，而我希望它可以在最初的原始段落。对这个问题有更优雅的方法吗？

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

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

D3.js替换段落中的文本

1 个答案: