Question

我在这个结构中有html：

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

和一个数据表，如：

[["#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

D3在这种情况下并不理想，因为您的文档并非完全由数据驱动 - 您已经拥有需要以非D3方式与数据匹配的元素。然而，你可以模仿D3所做的事情和＆＃34; bind＆＃34;手动数据到现有元素：

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");第一个选择现有元素，第二个选择（但不存在）嵌套元素。

完整演示here。

Answer 2

使用jquery istead它支持和性能更高。在Jquery，你只需要浏览一下这个很好的参考好参考：

如何通过从数据文件中选择ID来将子div添加到父div

2 个答案: