Javascript d3.js+动态HTML-未处理的第一个数据点和附加到错误位置的附件

我一直在尝试构建一个更具动态性的页面，根据需要添加/删除内容。为此，我动态地将一个子div添加到现有div中，并将内容放在其中。当我需要删除内容时，我可以只删除子div

除了d3.js&特别是.enter方法之外，这对任何事情都非常有效。当我不使用.enter方法时，一切正常，但当我使用.enter方法时，突然出现两个问题：

第一个数据点被删除。换句话说，它不会出现在输出中。 append方法将其余的数据点追加到HTML中，因此在body元素的结束标记之后&而不是在动态创建的元素中。 允许d3和动态创建的div使用它的原因或解决方案是什么

从

---

您忘了选择要匹配数据的元素。您需要添加。请在之前选择AllDiv。数据。。。。更新的JSFIDLE

如果不这样做，则会发生以下情况：数据与当前选择相匹配，即d3.selectreportPlace，第一个元素与现有元素相匹配，并且只追加两个元素。由于同样的原因，它们最终被附加到文档的末尾——您没有通过执行子选择来明确您要操作的内容

var area = document.querySelector("#reportArea");
area.innerHTML = "";

var reportPlacement = document.createElement("div");
reportPlacement.id = "reportPlace";
area.appendChild(reportPlacement);

var report = d3.select("#reportPlace");

report.data([1, 2, 3])
   .enter()  
   .append("div")
   .text(String);