Question

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

我的想法是，我应该为每个数据对象属性提供一个带有rect和text的元素，例如：

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

图形是按照预期创建的，但我的问题是当我尝试更新条形颜色（我在鼠标悬停时执行），而不是更新当前矩形和文本标记时，它会在每次更新时附加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();

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

2 个答案: