D3.js 如何通过从数据文件中选择on ID将子div附加到父div

我在这个结构中有html：

<div id="typeA"></div>
<div id="typeB"></div>

我认为可以使用d3.js将值作为文本附加到当前每个div的子div中，如下所示：

<div id="typeA">
    <div>someValue</div>
    <div>anotherValue</div>
</div>
<div id="typeB">
    <div>thirdValue</div>
</div>

---

使用jquery-istead，它的支持和性能要高得多。 在Jquery中，您只需查看在

---

这个很好的参考很好的参考：

D3在这种情况下并不理想，因为您的文档不完全是数据驱动的——您已经有了需要以非D3方式与数据匹配的元素。但是，您可以模拟D3的功能，并手动将数据“绑定”到现有元素：

data.forEach(function(d) {
  var elem = d3.select(d[0]).node();
  if(elem.__data__ === undefined) elem.__data__ = [];
  elem.__data__.push(d[1]);
});

这将把对应数据项的数组绑定到每个DOM元素。现在可以使用D3创建嵌套元素：

d3.selectAll("div").selectAll("div")
  .data(function(d) { return d; })
  .enter().append("div")
  .html(function(d) { return d; });

注意双

。选择All（“div”）

；第一个用于选择现有元素，第二个用于选择（但不存在）嵌套元素

---

完成演示。

如果您能在答案中添加更多信息，那就太好了。例如，解决OP.For the future问题的代码片段可以为您提供编写好答案的指导。

data.forEach(function(d) {
  var elem = d3.select(d[0]).node();
  if(elem.__data__ === undefined) elem.__data__ = [];
  elem.__data__.push(d[1]);
});

d3.selectAll("div").selectAll("div")
  .data(function(d) { return d; })
  .enter().append("div")
  .html(function(d) { return d; });