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

【问题标题】：d3 wrongly append dom elements on data updated3 在数据更新时错误地附加 dom 元素
【发布时间】：2015-04-02 13:13:55
【问题描述】：

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

我的想法是，我应该为每个数据对象属性设置一个带有矩形和文本的 g 元素，例如：

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

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

【问题讨论】：

您在每次悬停时添加文本/矩形，您应该只切换它们。见这里：jsfiddle.net/k8sftbez/1：当您将鼠标悬停在文本上时，文本看起来更粗体。这是因为您在每次悬停时将一个文本层放在另一个文本层上的另一个文本层上
是的，我正在努力解决这个问题

标签： javascript html css d3.js graph

【解决方案1】：

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

【讨论】：

我真的是 d3 的菜鸟，但据我了解，.enter() 只返回差异，而 .remove() 应该删除旧的。所以我期待更新功能也可以作为初始化功能，我错了吗？
您能详细说明一下您的回答吗？
假设您已经完成了在主体中添加矩形之前的部分，然后您创建了一个名为 updateRect 的函数，您可以在其中选择矩形并应用属性（cx、cy 宽度高度和填充或中风，如果你需要），然后在附加之后和应该更改矩形的情况下调用该函数

【解决方案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();

【讨论】：