Question

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

我有一个简单的条形图。当鼠标悬停一个条形时，会在其上显示一个字符串。今天早上，我添加了一个新的转换，可以更改条形图的背景颜色。

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

这是一个JSFiddle：http://jsfiddle.net/QbGRE/1/

    d3.selectAll("div.bar")
        .on("mouseover", function(d) {
            d3.select(this)
            .transition().duration(300)
            .style("background-color", "#EE3B3B");
        })
        .on("mouseout", function(d) {
            d3.select(this)
            .transition().duration(300)
            .style("background-color", "DarkRed");
        });

    d3.selectAll("div.line")
        .append("div")
        .attr("class","bar")
        .style("width", function(d){return d.occurrence /10 + "px";})
        .on("mouseover", function(d) {
            d3.select(this)
            .append("text").style("pointer-events", "none")
            .text(function(d){return d.occurrence + " occurences";});
        })
        .on("mouseout", function(d) {
            d3.select(this)
            .select("text").remove();
        });

谢谢大家的帮助，d3-savvy人

Answer 1

这样做的原因是您将鼠标事件处理程序连接两次，而后者则覆盖之前的事件处理程序。所以首先你要附加一个添加文本的文本，然后你附加一个改变颜色的文本，它取代了第一个。

解决此问题的最简单方法是在一个地方执行您想要对鼠标事件执行的所有操作：

.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");
    });

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

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

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

完整示例here。

转型中的冲突

1 个答案: