Javascript d3.js-具有交互式图例悬停问题的饼图

我用人口数据popu制作了d3.js饼图和相关图例。当我将鼠标悬停在饼图段上时，我实现了放大相关的图例方形部分和饼图段本身（较大的外表面）。现在我正试图做相反的事情。当我将鼠标悬停在图例的方块上时，我想放大方块本身和相关的饼图部分。类似于这个例子。我将只写下与饼图问题相关的部分代码

var pie = d3.pie()
            .value(function(d) {return d.pop})(popu);

var seg = d3.arc()
             .innerRadius(100)
             .outerRadius(150)
             .padAngle(.1)
             .padRadius(45);

var segover = d3.arc()
               .innerRadius(100)
               .outerRadius(170)
               .padAngle(.1)
               .padRadius(45);

所以这部分工作得很好

svg.append("g")
   .attr("class", "pieChart")
   .attr("transform", "translate(1250,570)")
   .selectAll("path")
   .data(pie) 
   .append("path")
   .attr("class", "pie")
   .attr("id", function(d){return d.data.id})
   .attr("d", seg)
   .on("mouseenter", function(d){
         d3.select(this)
           .transition(10)
           .duration(100)
           .attr("d", segover)
})

然后，我尝试在与图例相关的段上悬停时更改饼图段

var pieEl = svg.selectAll(".pie");
var piePath = pieEl.nodes();

svg.append("g")
   .attr("class", "legend")
   .attr("transform", "translate(-50,280)")
   .selectAll(".mySquers")
   .data(pie)
   .enter()
   .append("rect")
   .attr("class", "rec")
   .attr("x", 100)
   .attr("y", function(d,i){ return 100 + i*25})
   .attr("width", "15")
   .attr("height", "15")
   .attr("id", function(d,i){ return (popu[d,i].id)})
   .style("fill",function(d,i){
          if (this.id == piePath[i].id){
              return piePath[i].getAttribute("fill")
              }
              })
  .on("mouseenter", function(d){
          for (var i=0; i<piePath.length; i++){                                                                
              if (piePath[i].id == d.data.id){
                  piePath[i].setAttribute("d", segover);
               }}
})

var pieEl=svg.selectAll（“.pie”）；
var piePath=pieEl.nodes（）；
svg.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”、“转换（-50280）”）
.selectAll（“.mySquers”）
.数据（pie）
.输入（）
.append（“rect”）
.attr（“类”、“记录”）
.attr（“x”，100）
.attr（“y”，函数（d，i）{return 100+i*25}）
.attr（“宽度”、“15”）
.attr（“高度”、“15”）
.attr（“id”，函数（d，i）{return（popu[d，i].id）}）
.样式（“填充”，功能（d，i）{
if（this.id==piePath[i].id）{
返回piePath[i].getAttribute（“填充”）
}
})
.on（“鼠标指针”，功能（d）{
对于（var i=0；i我认为您应该将数据作为参数传递到函数中。通常，当您直接返回函数时，它将作为默认参数

piePath[i].setAttribute（“d”，segover（*与段*）相关的数据；

svg.append("g")
   .attr("class", "pieChart")
   .attr("transform", "translate(1250,570)")
   .selectAll("path")...
   .attr("d", seg) // this is same as : attr("d", seg(d))
   .on("mouseenter", function(d){
         d3.select(this)
           .transition(10)
           .duration(100)
           .attr("d", segover) // same here
})