Javascript Can'；t在d3js中的*选择之后插入元素*

看起来d3无法在选择后插入元素

以第一个教程的修改版本为例，其中数据数组有一个标签和一个值：

data = [ { label: "Ten", value: 10 }, { label: "Fifteen", value: 15 } ];
d3.select(".chart").selectAll("div").data(data)
  .enter()
    .append("div")
    .style("width", function(d) { return d.value * 10 + "px"; })
    .text(function(d) { return d.value; });

我找不到任何函数允许我在每个div之后自动插入带有标签文本的标签。我能得到的最接近的是以下代码笔：

但我不希望它位于选定元素内部，我希望它位于后面，因此它应该在图形外部显示标签

更新

---

对于任何需要解决方案示例的人：

您可以通过生成元素层次结构来实现所需。其思想是将每个

div

/

标签

对分组到一个容器元素中（例如，另一个

div

），然后可以将这两个元素附加到该容器元素中。代码看起来像这样

var divs = d3.select(".chart").selectAll("div").data(data)
  .enter()
  .append("div");
divs.append("div")
  .style("width", function(d) { return d.value * 10 + "px"; });
divs.append("label")
  .html(function(d) { return d.value; });

您是正确的，D3没有提供在选择之后（或者在选择之前）附加元素的函数。这是因为您正在对选择进行操作。也就是说，选择和数据是相互对应的，就像在其他数据之外有数据是没有意义的一样，D3并不真正考虑选择之外的元素。