D3.js 转型中的冲突

今天我带着另一个D3.js问题来找你

我有一个简单的条形图。 当鼠标悬停在一个条上时，它会显示一个字符串。 今天早上，我添加了一个新的过渡，改变了酒吧的背景颜色

现在，问题是： 如果改变背景颜色的.transition放在显示字符串的那一个下面，则只有背景颜色改变，字符串不会出现。 如果显示字符串的.transition放在改变背景颜色的下面，则只显示字符串，而不改变颜色

下面是一个JSFIDLE：

---

感谢大家的帮助，d3高手这是因为你连接了两次鼠标事件处理程序，后面的会覆盖前面的。因此，首先要附加一个用于添加文本的文件，然后再附加一个用于更改颜色的文件，以替换第一个文件

解决此问题的最简单方法是在一个位置执行鼠标事件的所有操作：

.on("mouseover", function(d) {
        d3.select(this)
        .append("text").style("pointer-events", "none")
        .text(function(d){return d.occurrence + " occurences";});

        d3.select(this)
            .transition().duration(300)
            .style("background-color", "#EE3B3B");
    })
    .on("mouseout", function(d) {
        d3.select(this)
        .select("text").remove();

        d3.select(this)
            .transition().duration(300)
            .style("background-color", "DarkRed");
    });

完整的例子。或者，您可以为事件处理程序使用不同的名称空间：

.on("mouseover.text", function(d) {
  // etc
});

.on("mouseover.color", function(d) {
  // etc
});

---

完整的例子。

很有魅力，谢谢你，拉尔斯！如果我可能会问，为什么我们需要编写

d3。选择（this）

两次？在这种情况下，您需要这样做，因为您正在使用选择做不同的事情，而这些选择不允许您链接它们。

.on("mouseover.text", function(d) {
  // etc
});

.on("mouseover.color", function(d) {
  // etc
});