Question

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

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

Answer 1

用＆＃34; .arc＆＃34;引用的类不存在。例如，用

更改

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

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

D3js饼图点击事件不起作用

1 个答案: