title: D3.js How to identify a single bar uniquely within a group bar chart
body: <p>I have created group bar chart by using D3.js. Each group has 2 bars. When any bar is clicked it must show some data using custom alert box. Now the bar can click and it shows data.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var state = svg.selectAll(".TestSuite")
           .data(data)
           .enter().append("g")
           .attr("class", "TestSuite")
           .on("click", function(d,i) {
                  if(i==0){
                  Alert.render(d3.select(this).data()[0].FalseStatements);
                  }else{
                   Alert.render(d3.select(this).data()[0].TrueStatements);
                  }
              })
           .attr("transform", function (d) {
           return "translate(" + x0(d.TestSuite) + ",0)";
       });</code></pre>
  </div>
  </div>
  </p>
  
  <p>But data is vary according to clicked bars. So how to identify each single bar within a single group uniquely.</p>
  
  <p>Here "if condition" that I used does not do the thing I want.How do I correct it?</p>
  
  <p>Thank you.</p>
  
  <p>(Suppose one group of bar consists two bars, one shows true count and other shows false count for a particular scenario. When we click the bar which shows true count then it should appear "TrueStatements" which is already have in data.using <code>d3.select(this).data()[0].TrueStatements</code> can do this. And also when someone click the bar which shows false count then it should appear "FalseStatements" which is already have in data.using <code>d3.select(this).data()[0].FalseStatements</code> can do this. My question is how do we identify the bar which shows true count and the bar which shows false count uniquely for do this task.)</p>
  
  <p>EDITED:</p>
  
  <p>How I get the data for bar chart(This is inside a for loop)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>originalDataSetForBarChart.push({
            TestSuite: "TS"+treeIndex,
            Pass: trueAppear,
            Fail: falseAppear,
            FalseStatements : falseStatement,
            TrueStatements : trueStatement
       });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Bar chart code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var margin = {
       top: 20,
       right: 10,
       bottom: 30,
       left: 40
   },
        
   width = 890 - margin.left - margin.right,
        
   height = 300 - margin.top - margin.bottom;
  
   var x0 = d3.scale.ordinal()
       .rangeRoundBands([0, width], .5);
  
   var x1 = d3.scale.ordinal();
  
   var y = d3.scale.linear()
       .range([height, 0]);
  
   var color = d3.scale.ordinal()
       .range(["#4169E1", "#800080"]);
  
   var xAxis = d3.svg.axis()
       .scale(x0)
       .orient("bottom");
  
   var yAxis = d3.svg.axis()
       .scale(y)
       .orient("left")
       .tickFormat(d3.format(""));
      
      
   var w = width + margin.left + margin.right;
      
   var h = height + margin.top + margin.bottom;
    
   var svg = d3.select(".chart1").append("svg")
             .attr("width", w)
             .attr("height", h)
             .append("g")
             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  //svg.call(tip);
  
  var xg = svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + height + ")");
  
   var yg = svg.append("g")
       .attr("class", "y axis");
  
   yg.append("text")
       .attr("transform", "rotate(-90)")
       .attr("y", 6)
       .attr("dy", ".71em")
       .style("text-anchor", "end")
       .text("Count");</code></pre>
  </div>
  </div>
  </p>
  
  <p>I append bars to this chart inside a setInterval function using following method.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function update() {
       startTime_barChart = new Date().getTime();
       for (var i = 0; i &lt; data.length; i++) {
           var testSuite = d3.keys(data[i]).filter(function (key) {
               return key !== "TestSuite";
           });
  
       }
  
       data.forEach(function (d) {
           d.trueFalseCount = testSuite.map(function (name) {
               return {
                   name: name,
                   value: +d[name]
               };
           });
  
       });
  
       x0.domain(data.map(function (d) {
           return d.TestSuite;
       }));
       x1.domain(testSuite).rangeRoundBands([0, x0.rangeBand()]);
       y.domain([0, d3.max(data, function (d) {
           return d3.max(d.trueFalseCount, function (d) {
               return d.value;
           });
       })]);
        
       //making the x axis/y axis
       xg.call(xAxis);
       yg.call(yAxis);
        
       //removing all the rectangles
       svg.selectAll(".TestSuite").remove();
      var tip_word; 
      var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {
              tip_word= "&lt;strong style='color:white'&gt;"+
                              "Pass count :"+
                        "&lt;/strong&gt;"+
                       " &lt;span style='color:white'&gt;" + d.True + 
                        "&lt;/span&gt;&lt;/br&gt;"+
                       "&lt;strong style='color:white'&gt;"+
                              "Fail count :"+
                        "&lt;/strong&gt;"+
                       " &lt;span style='color:white'&gt;" + d.False + 
                        "&lt;/span&gt;";
              return word;
          });
      
       var state = svg.selectAll(".TestSuite")
           .data(data)
           .enter().append("g")
           .attr("class", "TestSuite")
           .on("click", function(d,i) {
                  if(i%2 == 0){//How to set this condition
                    
                  Alert.render(d3.select(this).data()[0].FalseStatements);
                  }else{
                      
                   Alert.render(d3.select(this).data()[0].TrueStatements);
                  }
                 
              })
           .attr("transform", function (d) {
           return "translate(" + x0(d.TestSuite) + ",0)";
       });
      
      svg.call(tip);
       
       state.selectAll("rect")
           .data(function (d) {
           return d.trueFalseCount;})
           .enter().append("rect")
           .attr("width", x1.rangeBand())
           .attr("x", function (d) {
           return x1(d.name);
       })
           .attr("y", function (d) {
           return y(d.value);
       })
           .attr("height", function (d) {
           return height - y(d.value);
       })
           .style("fill", function (d) {
           return color(d.name);
       });
   
        
    if(barChartLegentController==1){    
     var legend = svg.selectAll(".legend")
        .data(testSuite.slice().reverse())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  
     legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);
  
     legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });
        
    barChartLegentController=2;      
    }
      
    endTime_barChart = new Date().getTime();
    var totalbar = (endTime_barChart-startTime_barChart)/1000;     
    //alert('Total bar time : '+ totalbar+' seconds');
   }</code></pre>
  </div>
  </div>
  </p>