javascript - 交互式饼图：将点击事件与饼图切片相关联

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

我认为这会有所帮助...当您将鼠标悬停在任何弧形功能上时，您可以将其更改为单击