Javascript 如何在D3.js中设置笔划厚度的动画？

我已经成功地将过渡添加到节点图中的圆中，但我现在正在尝试设置连接线鼠标悬停的动画

以下是我尝试过的：

//define the lines:
var edges = svg.selectAll("line")
            .data(dataset.edges)
            .enter()
            .append("line")
            .style("stroke", "#ccc")
            .style("stroke-width", 1)
            .on("mouseover", lineMouseover)
            .on("mouseout", lineMouseout);

//the callback functions for mouseover / mouseout
function lineMouseover() {
    d3.select(this).select("line")
        .transition()
        .duration(100)
        .style("stroke-width", 3);
}
function lineMouseout() {
    d3.select(this).select("line")
        .transition()
        .duration(100)
        .style("stroke-width", 1);
}

当我把鼠标移到线上时，似乎什么也没发生。因此，要么我捕捉的线不正确，要么我正在设置动画的属性是错误的属性

了解我这里做错了什么吗？

在代码中，LineMouseOver和lineMouseOut函数中的thiscontext是line元素。您可以简单地使用d3.selectThis来选择每一行并设置其属性。我写了一把小小提琴

关于，在代码中，LineMouseOver和lineMouseOut函数中的thiscontext是line元素。您可以简单地使用d3.selectThis来选择每一行并设置其属性。我写了一把小小提琴

---

关于，

lineMouseout做什么？它会取消旧的转换吗？完全一样，但是如果笔划宽度为1，您是否尝试过在事件侦听器上不选择第二个选项？我指的是第二个。选择后面的行。选择这个应该足够。lineMouseout做什么？它会取消旧的转换吗？完全一样，但是如果笔划宽度为1，您是否尝试过在事件侦听器上不选择第二个选项？我是说第二个。选择后面的行。选择这个应该足够了。谢谢回答。我不确定你的提琴如何显示鼠标悬停问题/解决方案。在代码中，您只是设置了一些行。这就是小提琴应该做的所有事情吗？小提琴展示了如何使用d3。选择this来更改路径属性，而不是使用d3。选择this。选择'line'。如果这不能解决您的问题，请随意详细说明。@Kristian对于与您需要的答案相同的代码的小提琴，请使用小提琴版本2：谢谢您的回答。我不确定你的提琴如何显示鼠标悬停问题/解决方案。在代码中，您只是设置了一些行。这就是小提琴应该做的所有事情吗？小提琴展示了如何使用d3。选择this来更改路径属性，而不是使用d3。选择this。选择'line'。如果这不能解决您的问题，请随意详细说明。@Kristian对于小提琴，请使用与您需要的小提琴版本2相同的代码：

svg.selectAll('path')
   .data(data)
   .enter()
   .append('path')
   .attr('d', function(d) { return line(d.p); })
   .attr('stroke-width', function(d) { return d.w; })
   .attr('stroke', function(d) { return d.c; })
   .on('mouseover', mOver)
   .on('mouseout', function(d) {
       d3.select(this)
           .transition()
           .duration(300)
           .style('stroke-width', d.w);
    });

function mOver(d) {
    d3.select(this)
        .transition()
        .duration(300)
        .style('stroke-width', 6);
}