同样用于分组条形图D3和添加图例的空格键

Question

这一个中的两个问题，使用我在网上找到的一个例子我能够将这个分组的条形图混合在一起。然而，由于我的数据的性质，我无法使用函数＆＃34; Months＆＃34;生成X1间距。

我的JSFiddle https://jsfiddle.net/tx9p93se/1/

我的所有栏都堆叠在一起，我能够使用/值函数生成随机X点。但是，我想计算每个月的空间，并计算出月内的空格。

此外，由于我的数据每个月并不总是统一，我将如何添加图例。无法使用示例版本，因为它希望数据每个月都是统一的，只查看最高结果。

我使用的例子 http://bl.ocks.org/mbostock/3887051

我的代码（我的数据在下面）

var margin = {top: 20, right: 20, bottom: 30, left: 40,},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

        var x0 = d3.scale.ordinal()
          .rangeRoundBands([0, width], .1);

        var x1 = d3.scale.ordinal();

        var y = d3.scale.linear()
          .range([height, 0]);

        var color = d3.scale.ordinal()
          .range(["#6fa2dd", "#6bda68", "#a366d6", "#debd46", "#5ab0ca", "#b755ca", "#ff8c00"]);

        var xAxis = d3.svg.axis()
          .scale(x0)
          .orient("bottom");

        var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left")
          .tickFormat(d3.format(".2s"));

        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 + ")");

        var data = nestedData;

        var months = d3.keys(data[0].values).filter(function(key) { return key !== "values"; });

        var materials = 


        x0.domain(data.map(function(d) { return d.key; }));
        x1.domain(months).rangeRoundBands([0, x0.rangeBand()]);
        y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.values;}); })]);

       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("Boxes");

       var month = svg.selectAll(".month")
        .data(data)
        .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) { return "translate(" + x0(d.key) + ",0)"; });

        month.selectAll("rect")
          .data(function(d) {return d.values; })
          .enter().append("rect")
          .attr("width", x1.rangeBand())
          .attr("x", function(d) { return (d.values / 30); })
          .attr("y", function(d) { return y(d.values); })
          .attr("height", function(d) { return height - y(d.values); })
          .style("fill", function(d) { return color(d.key); });

用于图表的JSON数据

[
  {
    "key": "1-2015",
    "values": [
      {
        "key": "MDF",
        "values": 726
      },
      {
        "key": "MAPLE PAINT GRADE",
        "values": 1652
      },
      {
        "key": "ALDER",
        "values": 1922
      },
      {
        "key": "MAPLE",
        "values": 1206
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 679
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 324
      },
      {
        "key": "POPLAR-MDF",
        "values": 19
      },
      {
        "key": "OAK",
        "values": 12
      }
    ]
  },
  {
    "key": "4-2015",
    "values": [
      {
        "key": "MAPLE",
        "values": 1982
      },
      {
        "key": "MAPLE PAINT GRADE",
        "values": 1988
      },
      {
        "key": "MDF",
        "values": 883
      },
      {
        "key": "ALDER",
        "values": 1746
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 639
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 367
      },
      {
        "key": "OAK",
        "values": 89
      },
      {
        "key": "POPLAR-MDF",
        "values": 24
      },
      {
        "key": "CHERRY",
        "values": 0
      },
      {
        "key": "HICKORY",
        "values": 1
      },
      {
        "key": "WALNUT",
        "values": 20
      }
    ]
  },
  {
    "key": "2-2015",
    "values": [
      {
        "key": "MAPLE PAINT GRADE",
        "values": 1758
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 339
      },
      {
        "key": "ALDER",
        "values": 1551
      },
      {
        "key": "MAPLE",
        "values": 1712
      },
      {
        "key": "MDF",
        "values": 727
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 434
      },
      {
        "key": "OAK",
        "values": 12
      },
      {
        "key": "POPLAR-MDF",
        "values": 16
      }
    ]
  },
  {
    "key": "3-2015",
    "values": [
      {
        "key": "ALDER",
        "values": 1673
      },
      {
        "key": "MAPLE PAINT GRADE",
        "values": 2185
      },
      {
        "key": "MAPLE",
        "values": 1741
      },
      {
        "key": "ALDER - RUSTIC",
        "values": 273
      },
      {
        "key": "MDF",
        "values": 1303
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 533
      },
      {
        "key": "POPLAR-MDF",
        "values": 4
      },
      {
        "key": "OAK",
        "values": 17
      }
    ]
  },
  {
    "key": "5-2015",
    "values": [
      {
        "key": "ALDER - RUSTIC",
        "values": 155
      },
      {
        "key": "ALDER",
        "values": 751
      },
      {
        "key": "MAPLE",
        "values": 446
      },
      {
        "key": "MAPLE PAINT GRADE",
        "values": 551
      },
      {
        "key": "MDF",
        "values": 268
      },
      {
        "key": "POPLAR STAIN GRADE",
        "values": 294
      },
      {
        "key": "POPLAR-MDF",
        "values": 7
      }
    ]
  }
]