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>"; 

搞亂了互動。沒有它的工作，更新小提琴：https://jsfiddle.net/reko91/4pmdaaaz/3/

它是由於您更改元素爲'第一個'，這是餅圖的容器的元素innerHTML。我絕對推薦不要使用innerHTML，而是使用textContent。但是，在這種情況下，我建議做一個新的div並改變div的風格展現，在這種情況下，33％:)

希望幫助