Javascript 在D3中的鼠标上方触发两个单独的事件

我有一个D3条形图，在每个条形图的顶部显示相关的数据点作为文本。我想只在鼠标上方显示文本，并使条形图具有不同的填充颜色。因此，本质上，在鼠标悬停时，必须设置条的样式以具有不同的填充颜色，并且文本不透明度应为1（从“0”开始）

我无法在鼠标上方执行两个独立的事件。为了使用d3.select（this）.attr（index_值），我为这两个元素都提供了一个index_值属性。但是我的鼠标悬停功能不起作用。我不知道为什么。这是我的相关代码部分

条形图

svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr('data-value', function(d){return d[region]})
    .attr("x", function(d) { return x(d.year); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d[region]); })
    .attr("height", function(d) { return height - y(d[region]); })
    .attr("fill", color)
    .attr("index_year", function(d, i) { return "index-" + d.year; })
    .attr("class", function(d){return "bar " + "bar-index-" + d.year;})
    .attr("color_value", color)
    .on('mouseover', synchronizedMouseOver)
    .on("mouseout", synchronizedMouseOut);

文本覆盖

svg.selectAll(".bartext")
   .data(data)
   .enter()
   .append("text")
   .attr("text-anchor", "middle")
   .attr("x", function(d,i) {
        return x(d.year)+x.rangeBand()/2;
    })
    .attr("y", function(d,i) {
        return height - (height - y(d[region])) - yTextPadding;
    })
    .text(function(d){
         return d3.format(prefix)(d3.round(d[region]));
    })
    .attr("index_year", function(d, i) { return "index-" + d.year; })
    .attr("class", function(d){return "bartext " + "label-index-" + d.year;})
    .on("mouseover", synchronizedMouseOver)
    .on("mouseout", synchronizedMouseOut);

还有鼠标悬停功能

var synchronizedMouseOver = function() {
      var bar = d3.select(this);
      console.log(bar);
      var indexValue = bar.attr("index_year");

      var barSelector = "." + "bar " + "bar-" + indexValue;
      var selectedBar = d3.selectAll(barSelector);
      selectedBar.style("fill", "#f7fcb9");

      var labelSelector = "." + "bartext " + "label-" + indexValue;
      var selectedLabel = d3.selectAll(labelSelector);
      selectedLabel.style("opacity", "1");

      };

---

这可以通过简化听众来实现。您不需要向rect和text添加侦听器。只需将它们添加到矩形中。以下是简化的侦听器：

function synchronizedMouseOver(d) {
    var bar = d3.select(this)
        .style("fill","red");

    var text = d3.select(".label-index-" + d.year)
        .style("opacity","1");
};

function synchronizedMouseOut(d) {
    var bar = d3.select(this)
        .style("fill",color);

    var text = d3.select(".label-index-" + d.year)
        .style("opacity","0");        
};

您在这里的两个朋友是

this

和

d

，分别是rect及其数据节点的DOM元素

---

下面是一个关于你想要的行为的例子。

这可以通过简化你的听众来实现。您不需要向rect和text添加侦听器。只需将它们添加到矩形中。以下是简化的侦听器：

function synchronizedMouseOver(d) {
    var bar = d3.select(this)
        .style("fill","red");

    var text = d3.select(".label-index-" + d.year)
        .style("opacity","1");
};

function synchronizedMouseOut(d) {
    var bar = d3.select(this)
        .style("fill",color);

    var text = d3.select(".label-index-" + d.year)
        .style("opacity","0");        
};

您在这里的两个朋友是

this

和

d

，分别是rect及其数据节点的DOM元素

---

下面是一个关于你所希望的行为的例子。

最好是有一把完整的小提琴，但我发现的一件事是，类选择器中的

bar-

和

label-

类没有前缀

。听起来你只希望鼠标处理程序在条上，而不是在文本上。这是我的小提琴，我正在使用d3.tsv方法导入数据，但我已经将数据的json版本粘贴在js文件。还有Lars，我正试着为这两个项目配备鼠标处理器。如果我将鼠标移到其中一个上面，它也会将另一个推入鼠标悬停状态（因为它们的索引值相同）。@ajai你检查过响应了吗？它为你想要实现的两件事提供了解决方案：颜色变化和鼠标悬停上的文本显示。非常感谢你！最好有一把完整的小提琴，但我发现的一件事是，类选择器中的

bar-

和

label-

类没有前缀

。听起来你只希望鼠标处理程序在条上，而不是在文本上。这是我的小提琴，我正在使用d3.tsv方法导入数据，但我已经将数据的json版本粘贴在js文件。还有Lars，我正试着为这两个项目配备鼠标处理器。如果我将鼠标移到其中一个上面，它也会将另一个推入鼠标悬停状态（因为它们的索引值相同）。@ajai你检查过响应了吗？它为你想要实现的两件事提供了解决方案：颜色变化和鼠标悬停上的文本显示。非常感谢你！