如何在D3.js中设置笔画粗细的动画？

Question

我已经成功地在节点图中向我的圆圈添加了过渡,但我现在正试图为连接线的鼠标悬停设置动画.

这是我尝试过的:

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

当我将鼠标悬停在线条上时,似乎根本没有发生任何事情.所以,要么我不正确地捕捉线,要么我正在动画的属性是错误的属性.

我在这里做错了什么？

Answer 1

在您的代码中,和函数中的this上下文是line元素.您可以简单地使用选择每一行并设置其属性.我写了一个小小提琴http://jsfiddle.net/pnavarrc/4fgv4/2lineMouseOverlineMouseOutd3.select(this)

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

问候,