D3js 饼图单击事件不起作用

D3js pie chart click event not work

本文关键字：事件不起作用单击 D3js 更新时间：2023-09-26

我尝试添加点击事件并获取选定的切片数据，但不起作用如果有任何解决方案，请发送给我。

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      width: 960px;
      height: 500px;
      position: relative;
    }
    path.slice{
        stroke-width:2px;
    }
    polyline{
        opacity: .3;
        stroke: black;
        stroke-width: 2px;
        fill: none;
    } 
    svg text.percent{
        fill:white;
        text-anchor:middle;
        font-size:12px;
    }
    </style>
    <body>
    <button onClick="changeData()">Change Data</button>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="Donut3D.js"></script>
    <script>
    var salesData=[
        {label:"Basic", color:"#3366CC"},
        {label:"Plus", color:"#DC3912"},
        {label:"Lite", color:"#FF9900"},
        {label:"Elite", color:"#109618"},
        {label:"Delux", color:"#990099"}
    ];
    var svg = d3.select("body").append("svg").attr("width",700).attr("height",300);
    svg.append("g").attr("id","quotesDonut");
    Donut3D.draw("quotesDonut", randomData(), 450, 150, 130, 100, 30, 0);
    svg.selectAll(".arc")
          .on("click", function(d) {
            alert('test');
              // code you want executed on the click event 
          });   
    function changeData(){
        Donut3D.transition("quotesDonut", randomData(), 130, 100, 30, 0);
    }
    function randomData(){
        return salesData.map(function(d){ 
            return {label:d.label, value:1000*Math.random(), color:d.color};});
    }
    </script>
    </body>

用".arc"引用的类不存在。例如更改

svg.selectAll(".percent")
      .on("click", function(d) {
        alert('test');
          // code you want executed on the click event 
      });

单击每个文本后，它会返回警报消息