如何在d3中的項目對上執行鼠標懸停事件？

Question

我實際上有兩列我添加的文本，如下所示。

如果我選擇所有.labels並在「this」上執行鼠標懸停功能，那麼該功能將僅對鼠標下文本中的文本進行操作。

問：如何在mouseover函數上編寫這樣的動作，以便在「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 
});