Question

我有效地添加了两列文本，如下所示。

如果我选择所有.labels并在＆＃34;这个＆＃34;上执行鼠标悬停功能，那么该功能将仅对鼠标下的文本中的文本进行操作。

问题：如何编写鼠标悬停功能，以便在＆＃34;这个＆＃34;整行（两列）？

我有一种感觉，这种想要的行为会要求我以不同的方式输入文字...... ???

感谢任何指导。

//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
});

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

1 个答案: