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和lineMouseOver函数中的lineMouseOut上下文是line元素。您只需使用d3.select(this)选择每一行并设置其属性即可。我写了一个小小提琴http://jsfiddle.net/pnavarrc/4fgv4/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);
}

此致

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

1 个答案: