Javascript 如何在d3中增加悬停时饼图段的大小

我用d3创建了饼图。 如何增加悬停时饼图段的大小？ 正如你们所看到的，绿色部分非常小，所以我想改变它的大小，就像红色部分一样。我该怎么做

我的代码：

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30},
           {"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30},
           {"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":5}];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);
var arcOver = d3.svg.arc()
        .outerRadius(r + 9);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
    .attr("fill", function(d, i){
        return color(i);
    })
    .attr("d", function (d) {
        // log the result of the arc generator to show how cool it is :)
        console.log(arc(d));
        return arc(d);
    })
     .on("mouseenter", function(d) {
            d3.select(this)
               .attr("stroke","white")
               .transition()
               .duration(1000)
               .attr("d", arcOver)             
               .attr("stroke-width",6);
        })
        .on("mouseleave", function(d) {
            d3.select(this).transition()            
               .attr("d", arc)
               .attr("stroke","none");
        });;

js fiddle中有一个例子： 谢谢

---

现在这是正确的代码。试试看……好的

Dsnap-图表
var canvas=d3.select（“#包装器”）
.append（'svg'）
艾特先生({
“宽度”：650，
‘高度’：500
});
风险值数据=[{
“标签”：“一个”，
“价值”：40
}, {
“标签”：“两个”，
“价值”：30
}, {
"标签":"三",，
“价值”：30
}];
变量颜色=['红色'，'蓝色']；
var colorscale=d3.scale.linear（）.domain（[0，data.length]）.range（colors）；
var arc=d3.svg.arc（）
.内半径（0）
.外层（100）；
var arcOver=d3.svg.arc（）
.内半径（0）
.外层（150+10）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d值；
});
var renderarcs=canvas.append（'g'）
.attr（'transform'，'translate（440200）'
.selectAll（“.arc”）
.数据（pie（数据））
.输入（）
.append（'g'）
.attr（'类'，“弧”）；
append（'path'）
.attr（'d'，弧）
.attr（'fill'，函数（d，i）{
返回色标（i）；
})
.on（“鼠标悬停”，功能（d）{
d3.选择（this）.transition（）
.持续时间（1000）
.attr（“d”，arcOver）；
})
.开启（“鼠标出”，功能（d）{
d3.选择（this）.transition（）
.持续时间（1000）
.attr（“d”，弧）；
});
renderarcs.append（'text'）
.attr（'transform'，函数（d）{
var c=弧形心（d）；
控制台日志（c）；
返回“translate”（“+c[0]+”，“+c[1]+”）；
})
.文本（功能（d）{
返回d.value+“%”；
});

我刚刚找到了解决问题的方法

我在d3中更改了

startAngle

和

endAngle

：

.on("mouseenter", function(d) {

         var endAngle = d.endAngle + 0.2;
         var startAngle = d.startAngle - 0.2;

              var arcOver = d3.svg.arc()
    .outerRadius(r + 9).endAngle(endAngle).startAngle(startAngle);

        d3.select(this)
           .attr("stroke","white")
           .transition()
           .duration(1000)
           .attr("d", arcOver)             
           .attr("stroke-width",6);
    })

---

工作示例：

谢谢您的回答。您可以在单击时更改数据，但我不需要更改。我希望在不更改数据的情况下增加数据段。如果您能够解释“这是正确的代码”之外的内容，那就太好了——您更改了什么，为什么？代码是如何实现该功能的？@Larskothoff，我检查了这段代码，但它不起作用。