无法在 d3js 中插入元素 *after* 选择答案

【问题标题】：Can't insert an element *after* selection in d3js无法在 d3js 中插入元素 *after* 选择
【发布时间】：2014-03-07 19:54:04
【问题描述】：

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

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

但我不希望它在内部被选元素，我希望它在之后，所以它应该在图表外部显示标签。

更新

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

【问题讨论】：

标签： javascript d3.js

【解决方案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 没有提供在选择之后（或就此而言在选择之前）附加元素的功能。那是因为您正在操作 on 选择。也就是说，选择和数据相互对应，就像在其他数据之外拥有数据没有意义一样，D3 也不允许考虑选择之外的元素。

【讨论】：