交互式饼图:将点击事件与饼图的切片相关联

Interactive pie charts: Associate a click event with a slice of a pie chart

本文关键字：切片 关联 交互式 事件      更新时间：2023-09-26

我正在使用d3制作玩具饼图.js

我的饼图有 3 个切片。我想知道是否可以在单击饼图的一部分时调用函数。

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

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

相关文章：