我试图构建一个更加动态的页面,根据需要添加/删除内容。为此,我将子 div
动态添加到现有 div
并将内容放在那里。当我需要删除内容时,我可以删除子 div
。
除了 d3.js 和特别是 .enter()
方法,这对所有东西都适用。当我不使用 .enter()
方法时一切正常,但是当我使用 .enter()
时突然出现两个问题:
- 第一个数据点被丢弃。换句话说,它不会出现在输出中。
.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);
最佳答案
您忘记选择要匹配数据的元素。您需要在 .data(...)
之前添加 .selectAll("div")
。更新了 jsfiddle here .
如果您不这样做,将会发生什么情况,即数据与当前选择匹配(即 d3.select("#reportPlace")
),第一个元素匹配(到现有元素)并且只附加了两个。出于同样的原因,它们最终被附加到文档的末尾——您没有通过子选择明确表示要操作的内容。
关于javascript - d3.js + 动态 HTML - 第一个数据点未处理 & .append 追加到错误的地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18468004/