2

我试图构建一个更加动态的页面，根据需要添加/删除内容。为此，我将一个子动态添加div到现有的div并将内容放在那里。当我需要删除内容时，我可以删除 child 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);
4

1 回答 1

1

您忘记选择要匹配数据的元素。您需要.selectAll("div")在.data(...). 在这里更新了 jsfiddle 。

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

于 2013-08-27T14:25:15.957 回答