在d3js中*选择后无法插入元素*

Question

看起来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之后自动插入带有标签文本的标签的功能。我能得到的最接近的是以下Code Pen：

http://codepen.io/anon/pen/qHIcn

但是我不希望在里面选择，我希望在之后，所以它应该在图表外显示标签。

更新

对于想要解决方案示例的任何人：http://codepen.io/anon/pen/ICkeg

Answer 1

您可以通过生成元素层次结构来实现您想要的效果。我们的想法是，每个div / label对将分组在一个容器元素（例如另一个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实际上不允许考虑选择之外的元素。