score:6

Accepted answer

You could use the closure to keep a reference to the parent data like this:

bar.each(function(dbar) {            // dbar refers to the data bound to the bar
  d3.select(this).selectAll("rect")
      .on("click", function(drect) { // drect refers to the data bound to the rect
        console.log(dbar.key);       // dbar.key will be either 'likes' or 'dislikes'
      });
});

update:

See below for various ways to access different levels in your DOM structure. Mix and match! See the live version of this and try to click on the .rect divs: http://bl.ocks.org/4235050

var data =  [
    {
        key: 'likes',
        values: [{ key: 'blue-frog', value: 1 }, { key: 'goodbye', value: 2 }]
    }, 
    {
        key: 'dislikes',
        values: [{ key: 'blue-frog', value: 3 }, { key: 'goodbye', value: 4 }]
    }];

var chartdivs = d3.select("body").selectAll("div.chart")
    .data([data]) // if you want to make multiple charts: .data([data1, data2, data3])
  .enter().append("div")
    .attr("class", "chart")
    .style("width", "500px")
    .style("height", "400px");

chartdivs.call(chart); // chartdivs is a d3.selection of one or more chart divs. The function chart is responsible for creating the contents in those divs

function chart(selection) { // selection is one or more chart divs
  selection.each(function(d,i) { // for each chartdiv do the following
    var chartdiv = d3.select(this);
    var bar = chartdiv.selectAll(".bar")
        .data(d)
      .enter().append("div")
        .attr("class", "bar")
        .style("width", "100px")
        .style("height", "100px")
        .style("background-color", "red");  

    var rect = bar.selectAll(".rect")
        .data(function(d) { return d.values; })
      .enter().append("div")
        .attr("class", "rect")
        .text(function(d) { return d.key; })
        .style("background-color", "steelblue");

    bar.each(function(dbar) {
      var bardiv = d3.select(this);
      bardiv.selectAll(".rect")
          .on("click", function(drect) { 
            d3.select(this).call(onclickfunc, bardiv);
          });
    });

    function onclickfunc(rect, bar) { // has access to chart, bar, and rect
      chartdiv.style("background-color", bar.datum().key === 'likes' ? "green" : "grey");
      console.log(rect.datum().key); // will print either 'blue-frog' or 'goodbye'
    }
  });
}

score:0

rect.on("click", this.onChartClick.bind(this)); won't work because you're not passing a function, you're passing the return value of the function (by appending (this)).

If you want to pass this and data (d), try this:

// assuming you have this somewhere earlier
var onChartClick = function () {}

// change your parent click to
rect.on("click", function(d) {
    return onChartClick.call(this, d);
});

score:0

Another way could be f.e passing an object/json or in my case a class instance which creates that rectangle to the event to access it inside

var rect = svgContainer.append("rect");
rect.datum(this);
rect.on('click', function(d){
    alert(d);
    alert(d.id); // etc.
});

Related Query

More Query from same tag