d3错误地在数据更新上附加了dom元素

Question

我正在尝试使用d3和他的进入/退出模式来更新我的条形图，在这里您可以看到当前结果http://jsfiddle.net/k8sftbez/

我的想法是，我应该为每个数据对象属性添加一个带有rect和文本的元素，例如：

<g>
  <rect></rect>
  <text></text>
</g>

该图形是按方面创建的，但是我的问题是，当我尝试更新条形颜色时（我在鼠标悬停时执行此操作），而不是更新当前的rect和text标签，而是在每次更新时都添加了2个新标签。 在示例中，您可以看到问题（ http://jsfiddle.net/k8sftbez/ ）

Answer 1

这是因为您的更新功能实际上还包括创建条形图，为了使它们仅更改颜色，您应该具有两个单独的功能，一个用于添加对象，另一个用于更新（例如，您可以附加没有任何属性的矩形的函数以及为矩形设置样式的更新函数）

Answer 2

最后，我修复了如下修改更新功能的问题： http : //jsfiddle.net/5ft6uL6k/

我认为使用占位符并更新它们是一种更优雅的方法。

基本上这部分：

var bar = chart.selectAll("g").data(data)
bar.enter().append("g").attr("transform", function(d, i) {
  return "translate(0," + i * barHeight + ")";
})

var valueBar = bar.append("rect");
valueBar
  .attr(valueBarValues.attr)
  .attr("width", function(d){return x(d.value)})
  .style(valueBarValues.style);

bar.append("text")
  .attr(textConfig.attrs)
  .style(textConfig.style)
  .text(function(d) { return d.name; })

bar.exit().remove();

更改如下：

    var bar = chart.selectAll("g").data(data)
    var barEnter = bar.enter().append("g");

    barEnter.attr("transform", function(d, i) {
        return "translate(0," + i * barHeight + ")";
    });

    barEnter.append("rect");
    barEnter.append("text");

    var textBar = bar.selectAll("text")
    textBar
        .attr(textConfig.attrs)
        .style(textConfig.style)
        .text(function(d) { return d.name; })

    var valueBar = bar.selectAll("rect");
    valueBar
    .attr(valueBarValues.attr)
    .attr("width", function(d){return x(d.value)})
    .style(valueBarValues.style);

  bar.exit().remove();