D3.js Grouped Bar Chart Legend Missing Data

I have a grouped bar chart with an interactive legend. All seems to display and work ok but the legend is missing a value. I know that the issue is that the legend is going off the

Solution 1:

I would go for the following modifications:

1. get your legend as an array of objects (instead of strings), each one containing the name as a string and a bollean for active/inactive.

   var legendData = d3.set(data.reduce(function (previousValue, currentValue) {
       return previousValue.concat(currentValue.DataPoints.map(function (d) {
           return d.BarValue;   
       }))
   }, [])).values();
   //Add this:
   legendData=legendData.map(function(s){
      return {name:s, active:true};
   });
   

2. map the legendData to your legend objects

   legend.selectAll("g")
       .data(legendData)
       .enter().append("svg:g")
   

   and remove the former binding:

   g.append("svg:rect")
       //.datum(function (d) { return d.DataPoints;}) //remove this
       .attr("rx", li.r)
   

now each legend item knows the corresponding string and its state.

3. use the name field of the data where applicable: for any legendData[i] within the legend part, you should have d.nameinstead (notice that you're not explicitly referencing legendData anymore, since you've done the binding earlier). There seems to be nothing to do for the active field (you are already using d.active).