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

d3 wrongly append dom elements on data update

本文关键字：dom 元素 错误 数据 更新 d3      更新时间：2023-09-26

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

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

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

该图创建为aspected，但我的问题是，当我尝试更新条形图颜色时（我在mouseover上进行），它没有更新当前的rect和text标记，而是在每次更新时添加2个新标记。在这个例子中你可以看到问题(http://jsfiddle.net/k8sftbez/)

这是因为您的更新函数实际上也包括条形的创建，为了让它们只更改颜色，您应该有两个单独的函数，一个用于对象的附加，另一个用于更新（例如，您可以有一个附加没有任何属性的矩形的函数和对它们进行样式设置的更新函数）

最后，我修复了如下修改更新函数的问题：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();
相关文章：