javascript - 如何在 d3 中的一对项目上执行鼠标悬停事件？

Question

我实际上添加了两列文本，如下所示。

如果我选择所有.label，并对“this”执行鼠标悬停功能，那么该功能只会对鼠标下的文本中的文本进行操作。

问题:如何编写鼠标悬停函数，以便该操作发生在“此”整行(两列)上？

我有一种感觉，这种期望的行为将要求我以不同的方式输入文本......？？？

感谢任何指导。

//column 1
svg.selectAll("labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll("labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

Answer 1

试试这个方法。

//column 1
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("id",function(d,i){ return "column1_"+i; }) //Add a unique id with it's column name
    .attr("class", "labels")
    .attr("x", function(d) {
        if (xValue(d) < 0) {
            return xScale(xValue(d)) - 15;
            }
            else {
                return xScale(0) - 15;
                }
        })
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("text-anchor", "end")
    .attr("dy", ".35em")
    .text(function(d) { return d.lineitem + " " + parseFloat(d.diff).toFixed(1); });

//column 2
svg.selectAll(".labels")
    .data(data)
    .enter()
    .append("text")
    .attr("class", "labels")
    .attr("id",function(d,i){ return "column2_"+i; }) //Add a unique id with it's column name
    .attr("x", xScale(d3.max(data, xValue)) + 50)
    .attr("y", function(d) { return yScale(yValue(d)); })
    .attr("dy", ".35em")
    .text(function(d) { return parseFloat(d.time0).toFixed(1); });

svg.selectAll(".labels").on("mouseover,funtion(d,i){
   d3.select("#column1_"+i).style("opacity",0.2); //Perform the same action on text in column1
   d3.select("#column2_"+i).style("opacity",0.2); //Perform the same action on text in column2
});