Javascript D3js饼图单击事件不工作_Javascript_D3.js_Mouseclick Event

Javascript D3js饼图单击事件不工作

javascript d3.js

Javascript D3js饼图单击事件不工作,javascript,d3.js,mouseclick-event,Javascript,D3.js,Mouseclick Event,我尝试添加click事件并获取选定的切片数据，但不起作用如果有任何解决方案，请寄给我我尝试添加click事件并获取选定的切片数据，但不起作用如果有任何解决方案，请寄给我我尝试添加click事件并获取选定的切片数据，但不起作用如果有任何解决方案，请寄给我 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font-family: "Helvetica Neue

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

<!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>


身体{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
宽度：960px；
高度：500px；
位置：相对位置；
}
路径切片{
笔画宽度：2px；
}
多段线{
不透明度：.3；
笔画：黑色；
笔画宽度：2px；
填充：无；
} 
svg文本百分比{
填充物：白色；
文本锚定：中间；
字体大小：12px；
}
更改数据
var销售数据=[
{标签：“基本”，颜色：#3366CC}，
{标签：“Plus”，颜色：#DC3912}，
{标签：“Lite”，颜色：#FF9900}，
{标签：“精英”，颜色：#109618“}，
{标签：“Delux”，颜色：#990099}
];
var svg=d3.select（“body”）.append（“svg”）.attr（“width”，700）.attr（“height”，300）；
svg.append（“g”）.attr（“id”、“quotesDonut”）；
draw（“quotesDonut”，randomData（），45015013010030,0）；
svg.selectAll（“.arc”）
.打开（“单击”，功能（d）{
警报（“测试”）；
//要在单击事件上执行的代码
});   
函数changeData（）{
transition（“quotesDonut”，randomData（），130100,30,0）；
}
函数randomData（）{
返回salesData.map（函数（d）{
返回{label:d.label，值：1000*Math.random（），color:d.color}；}）；
}

用“.arc”引用的类不存在。例如，更改为

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

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