如何通过从数据文件中选择 id 将子 div 附加到父 div

Question

我在这个结构中有html：

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

和 table 数据，例如：

[["#typeA","someValue"],
 ["#typeA","anotherValue"],
 ["#typeB","thirdValue"]]

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

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

这需要 nest() 吗？

仅供参考，由于现在对我来说很明显的原因，这没有用：

var body = d3.select("body")
    .data(matrix)
    .enter()
    .select(function(d) {return d[0]}).
    .data(this)
    .enter()
    .append("div")
    .text(function(d) {return d[1]});

Answer 1

使用 jquery 相反，它的支持和性能要好得多。在 Jquery 中，你只需看看遍历这个很好的参考很好的参考:

Answer 2

D3 在这种情况下并不理想，因为您的文档并非完全由数据驱动——您已经拥有需要以非 D3 方式与数据匹配的元素。但是，您可以模拟 D3 的作用，并 "bind" 手动将数据添加到现有元素：

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

这会将相应数据项的数组绑定到每个 DOM 元素。现在您可以使用 D3 的 nested selections 来创建嵌套元素：

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

注意加倍.selectAll("div")；第一个 select 现有元素，第二个 select （尚不存在）嵌套元素。

完成演示 here。

如何通过从数据文件中选择 id 将子 div 附加到父 div

How to append child divs to parent divs by selecting on ids from a data file

d3.js