D3js餅圖單擊事件不起作用

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

用“ .arc”引用的類不存在。 例如更改

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

單擊每個文本后，它會返回警告消息

D3js餅圖單擊事件不起作用

問題描述

1 個解決方案

解決方案1
0 2015-03-10 12:24:24

D3js餅圖單擊事件不起作用

問題描述

1 個解決方案

解決方案1 0 2015-03-10 12:24:24

解決方案1
0 2015-03-10 12:24:24