javascript - 路径上的 D3 事件不起作用

Question

这就是我所做的:

var path = svg.selectAll(".arc")
    .data(pie(data).sort(null))
    .enter().append("g")
    .attr("class", "arc")
    .append("path").style("stroke-width", 0)
    .on("click", function(d){console.log(d)})
    .style("stroke", "white")
    .attr("d", arc)
    .style("fill", color)
    .style("opacity", function(d){ return(d.data.name == "ess")?0.6:1})
    .on("mouseover", function(d,i){ alert(1);})
    .on("mouseout", animateSecondStep);

但是这些事件都没有触发

This is what i get in events

这是 JSFiddle https://jsfiddle.net/4pmdaaaz/1/

Answer 1

看起来像这一行:

document.getElementById(element).innerHTML += "<div class='result visible'><div class='giant-text' style='font-size:32px;'>" + precentage + "%</div> </div>";

扰乱了交互。没有它也可以工作，更新了 fiddle :https://jsfiddle.net/reko91/4pmdaaaz/3/

这是因为您更改了 id 为“first”的元素的 innerHTML，该元素是饼图的容器。我绝对建议不要使用innerHTML，而使用textContent。但在这种情况下，我建议创建一个新的 div 并更改该 div 的样式以显示(在本例中)33% :)

希望有帮助