Интерактивные круговые диаграммы: Свяжите событие щелчка с ломтиком круговой диаграммы

Question

Я работаю на игрушки круговой диаграммы с помощью d3.js

Моя круговая диаграмма имеет 3 ломтика. Я хотел бы знать, можно ли вызывать функцию всякий раз, когда нажимается кусочек круговой диаграммы.

Answer 1

function animateFirstStep(){ 
    d3.select(this) 
     .transition()        
     .attr("d",arc1); 
     /* .attr("d", arc2) 
     .style("fill", "black"); */ 

     /* .style("stroke", "black") 
     .style("stroke-width", 1); */   
}; 
function animateSecondStep(){ 
    d3.select(this) 
     .transition() 
     .ease("elastic") 
     .duration(1500) 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.trName); });    
     /* .style("stroke", "white") 
     .style("stroke-width", 0); */ 
}; 
    var g = svg.selectAll(".arc") 
     .data(pie(data.HubActivity.hubWorkloadList)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.trName); }) 
     .on("mouseover", animateFirstStep) 
     .on("mouseout", animateSecondStep); 

Я думаю, что это будет иметь некоторую помощь ... при наведении курсора мыши на любую функцию дуги уволят вы можете изменить его, чтобы нажать