Question

我用人口数据popu制作了d3.js饼图和相关图例。当我将鼠标悬停在饼图段上时，就可以放大相关的图例正方形部分和饼图段本身（更大的outerRadius ）。现在，我试图做相反的事情。当我将鼠标悬停在图例的正方形上时，我想同时扩大正方形本身和相关的饼图部分。 https://www.amcharts.com/demos/pie-chart-with-legend/处的示例类似。我将只写下与饼图问题有关的部分代码。

using Newtonsoft.Json;

所以这部分效果很好。

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

当我在DOM中放入setAttribute（“ d”，segover）而不是通常以字符串形式写入d属性（d =“ M144.58 .....”）时，我有了一个函数（d =“ function（派）{_e）;}”和悬停派片段消失。但是例如，如果将悬停时将属性填充设置为红色，它会更改并绘制段。因此，代码表示法是好的。我缺少d3.arc（）生成的d路径的某些行为吗？欢迎任何建议。

Answer 1

我认为您应该在函数中将数据作为参数传递。通常，当您直接返回该函数时，它将作为默认参数。

piePath[i].setAttribute("d", segover(*data associated with segment*));

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

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

1 个答案: