javascript - d3.js + 动态 HTML - 第一个数据点未处理 & .append 追加到错误的地方

Question

我试图构建一个更加动态的页面，根据需要添加/删除内容。为此，我将子 div 动态添加到现有 div 并将内容放在那里。当我需要删除内容时，我可以删除子 div。

除了 d3.js 和特别是 .enter() 方法，这对所有东西都适用。当我不使用 .enter() 方法时一切正常，但是当我使用 .enter() 时突然出现两个问题:

1. 第一个数据点被丢弃。换句话说，它不会出现在输出中。
2. .append() 方法将其余数据点附加到 HTML - 所以在 body 元素的结束标记之后& 不在动态创建的元素中。

允许此功能与 d3 和动态创建的 div 一起使用的原因或解决方案是什么？

来自 http://jsfiddle.net/TJNCK/1/

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);

Answer 1

您忘记选择要匹配数据的元素。您需要在 .data(...) 之前添加 .selectAll("div")。更新了 jsfiddle here .

如果您不这样做，将会发生什么情况，即数据与当前选择匹配(即 d3.select("#reportPlace"))，第一个元素匹配(到现有元素)并且只附加了两个。出于同样的原因，它们最终被附加到文档的末尾——您没有通过子选择明确表示要操作的内容。