0
    1.

I think this is a simple question but I'm not getting it. I have the following code for the x-axis of my Stacked bar chart, and I'm trying to access the x-value when the corresponding stacked bar is clicked. I've tried selecting xAxis, x, and .domain, but I'm getting null values.

    data =  [
        {State: "Greg", Achieved:10,Breached:10},
        {State: "Ari", Achieved:10,Breached:10},
        {State: "Loser", Achieved:10,Breached:10}
      ];

    // From JSON object state represents X axis (I want to get this). 
  var state = vis.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

  state.selectAll("rect")
      .data(function(d) {  return d.ages; })
    .enter().append("rect")
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); })
      .attr("width", x.rangeBand())
      .on("click", function(d, i){ console.log(x.rangeBand());return scope.onClick({item: d});});
munees
  • 1
  • 1
  • Hard to tell without full code or a plnkr, but I guess doing something like `x(d.State)` in your click event handler should work – Hugues Stefanski Apr 28 '15 at 18:50
  • Thanks Hugues. I have Placed my code in plunker http://plnkr.co/edit/kXYTf1G6ZWhQJr7X0mCC?p=catalogue Reference graph:http://bl.ocks.org/mbostock/3886208 – munees Apr 28 '15 at 19:20
  • I upadted your plnkr: http://plnkr.co/edit/JLBTrA0Trm1U1bhWlMAH?p=preview Now when clicking on a rectangle, you get the object logegd in the console. I had to make a few changes, have a look at the code and see if you get it. – Hugues Stefanski Apr 28 '15 at 19:36
  • Great Hugue!s I appreciated your quick response!! I am getting below object while click the bars all the time and wanted to make two bars in same x axis like bl.ocks.org example. Below object i got all the times {"State":"Greg","Achieved":10,"Breached":10,"ages":[{"name":"Achieved","y0":0,"y1":10},{"name":"Breached","y0":10,"y1":20}],"total":20}. This seems return zero th object all the times. – munees Apr 29 '15 at 05:14
  • Hi Huges, I made some changes in this d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });. Now Its working fine as i expected. – munees Apr 29 '15 at 18:25
  • Great, good to hear you managed to sort it out! – Hugues Stefanski Apr 29 '15 at 19:43

0 Answers0