D3 - クリックイベントでデータパラメータを取得できません

Question

D3 barChartにonClickイベントを追加しようとしましたが、クリックしたバーに応じていくつかのアクションを実行しようとしましたが、イベントの 'data'パラメータを取得できません未定義）。何か不足していますか？前もって感謝します！

var data = [{ 
     letter: 'A', 
     frequency: 5 
    }, { 
     letter: 'B', 
     frequency: 8 
    }]; 

    var margin = { 
      top: 20, 
      right: 20, 
      bottom: 30, 
      left: 40 
     }, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, width], .1); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left") 
     .ticks(10, "%"); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    d3.select("body").on('click', function(d, i) { 
      console.log(d); 
      console.log(i); 
      console.log(d3.event); 
     }); 




    x.domain(data.map(function(d) { 
     return d.letter; 
    })); 
    y.domain([0, d3.max(data, function(d) { 
     return d.frequency; 
    })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Frequency"); 

    svg.selectAll(".bar") 
     .data(data) 
     .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { 
      return x(d.letter); 
     }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { 
      return y(d.frequency); 
     }) 
     .attr("height", function(d) { 
      return height - y(d.frequency); 
     }); 

Answer 1

clickイベントは、ページ本体ではなく、バー自体にバインドする必要があります。コードの末尾に以下を追加し、本体からclickイベントを削除すると、正常に動作します。

svg.selectAll(".bar").on('click', function(d, i) { 
      console.log(d); 
      console.log(i); 
      console.log(d3.event); 
     });