D3 - Datenparameter bei Klickereignis kann nicht abgerufen werden

Question

Ich versuche, ein onClick-Ereignis zu meinem D3-BarChart hinzuzufügen und einige Aktionen abhängig von der angeklickten Leiste auszuführen, aber ich kann den Parameter 'data' des Ereignisses nicht abrufen (nicht definiert). Fehle ich etwas? Danke im Voraus!

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

Sie haben die click Ereignis an den Stangen zu binden, selbst, nicht die Seite Körper. Wenn Sie am Ende Ihres Codes Folgendes hinzufügen und das Ereignis click aus dem Körper entfernen, funktionieren die Dinge ordnungsgemäß.

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