Question

我用d3创建了一个多线图。

我试图为每一行（路径）创建一个处理程序，但它不起作用。

以下是创建路径的代码：

var line2 = d3.svg.line()
            .x(function(d, i){return x(AXValues[i])})
            .y(function(d, i){return y(AYValues[i])}); 

p2 = svg.append("path")
                .datum(ArticleData)
                .transition()
                .delay(1100)
                .attr("id", "p"+i)
                .attr("class", "p"+i)
                .attr("d", line2(AXValues, AYValues))
                .style("stroke", "Brown")
                .style("stroke-width", 2)
                .style("fill", "none");

我试图做这样的事情：

.on("mouseover", this.style("stroke-width", 5));

Answer 1

您需要将侦听器附加到附加对象：

p2.on("mouseover", function () {
    d3.select(this).style("stroke-width", 5);
});

感谢@Lars Kotthoff进行更正

Answer 2

你可以通过css使用＆＃39; hover＆＃39;例如，对于你正在申请的p2类，你可以有一些看起来像这样的css。

p2:hover {
 stroke-width: 5;
}

悬停会将笔触宽度更改为5，一旦悬停事件结束，元素将返回其原始笔触宽度

鼠标悬停在事件线路径d3上

2 个答案: