Javascript 未能改变圆弧半径的

我正在尝试扩展在我的图表中创建的弧的外轮廓。我看不出鼠标一过该怎么做。我试着用我之前制作的更大的外轮廓（bArc）制作一个新的圆弧，并将其应用于路径属性“d”

在路径上的鼠标悬停事件中

path.on("mouseover", function(d){

但是没有用，控制台中也没有错误。我有点不知所措，而且我能找到的关于这个主题的所有资源似乎都很旧，不推荐用于v4

我做了这把小提琴：

这行

d3.select(this).select("svg").attr("d", bArc);

。。。没什么意义。您必须将更改应用于DOM元素，这只是

this

。因此，它应该是：

d3.select(this).attr("d", bArc);

在执行

mouseout

操作时，不要忘记将

d

属性更改回来

以下是您的代码和这些更改：

var数据=[{
标签：“0-24%”，
颜色：“ff875e”，
亮点：“ff7a4d”，
价值：3，
},
{
标签：“25%-49%”，
颜色：#f6bc58“，
亮点：“f5b13d”，
价值：1，
},
{
标签：“50%-74%”，
颜色：#eae860“，
亮点：“e7e54b”，
价值：2，
},
{
标签：“75%-100%”，
颜色：#85d280“，
亮点：“80d07b”，
价值：3，
}
];
变量工具提示=d3。选择（'body'）
.append（'div'））
.attr（'class'，'tooltip2'）
.样式（“不透明度”，0）；
var宽度=360；
var高度=360；
变量半径=数学最小值（宽度、高度）/2.5；
外部变量=高度/2-20；
//D3允许将颜色定义为一个范围，下面是按照与上面数据集相同的顺序输入的范围/本特纳
var color=d3.scaleOrdinal（）
.范围（['ff875e'、'f6bc58'、'eae860'、'85d280'）；
var svg=d3。选择（“#piechart2”）
.append（'svg'）
.attr（'width'，width）
.attr（'height'，height）
.append（'g'）
.attr（'transform'，'translate（+）（宽度/2）+
",；
var arc=d3.arc（）
.内半径（0）
.外部（半径）
.padAngle（.05）
.焊盘半径（半径/5）；
var bArc=d3.arc（）
.内半径（0）
.外表面（半径*1.1）
.padAngle（.05）
.焊盘半径（半径/5）；
var pie=d3.pie（）
.价值（功能（d）{
返回d值；
})
.sort（空）；
var path=svg.selectAll（'path'）
.数据（pie（数据））
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，函数（d）{
返回颜色（d.data.color）；
});
path.transition（）
.持续时间（500）
.attrTween（“d”，tweenPie）；
路径.on（“鼠标悬停”，函数（d）{
tooltip.transition（）
.持续时间（200）
.style（“不透明度”，.9）
.style（“显示”，空）
.text（d.data.label+“：”+d.data.value）；
d3.选择（this）.transition（）
.持续时间（500）
.style（'fill'，d.data.突出显示）
.attr（“d”，bArc）；
});
on（“mousemove”，function（））{
tooltip.style（“top”、（event.pageY-10）+“px”）.style（“left”、（event.pageX+10）+“px”）；
});
路径开（“鼠标出”，函数（d）{
d3.选择（this）.transition（）
.持续时间（500）
.style（'fill'，d.data.color）
.attr（“d”，弧）；
tooltip.transition（）
.持续时间（300）
.样式（“不透明度”，0）；
});
函数tweenPie（b）{
b、 内半径=0；
var i=d3.插值({
startAngle:0，
端角：0
}，b）；
返回函数（t）{
返回弧（i（t））；
};
}

.tooltip2{
位置：绝对位置；
文本对齐：居中；
宽度：自动；
高度：28px；
填充：2px；
字体：18px无衬线；
背景：淡蓝色；
边界：0px；
边界半径：8px；
指针事件：无；
}

---

谢谢，我把它复杂化了，似乎：(

d3.select(this).attr("d", bArc);