Javascript D3.js分组条形字符系列的可变编号

大家好，我开始用D3.js做一些工作，遇到了一个问题。我需要制作一个分组条形图，每个组的系列数可变。我遵循了这本很棒的教程，通过填充初始数据对其进行一些更改，使每个组都有相同数量的系列，从而使其正常工作。但这让我在图表上留下了很多空白。这是我目前掌握的代码

 var filler = {ctr:0, impressions:0, eCPM:0};
 var maxLen = d3.max(layouts, function(d) { return d3.max(layouts, function(d2) { return d2.length})} );
 var len = layouts.length;
     for(var i = 0; i < len; i++) {
        var page = layouts[i];
        while(page.length < maxLen) {
            page.push(filler);
        }
     }

  var graphParameter = "ctr";
  var n = maxLen, // number of layers
      m = layouts.length, // number of samples per layer
      series = d3.transpose(layouts),
      yGroupMax = d3.max(series, function(layer) { return d3.max(layer, function(d) { return d[graphParameter]; }); });

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

  var x = d3.scale.ordinal()
         .domain(d3.range(m))
         .rangeRoundBands([0, width], .08);

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

  var colors = ['rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,139)','rgb(255,255,191)','rgb(217,239,139)','rgb(166,217,106)','rgb(102,189,99)','rgb(26,152,80)'];
  var colorScale = d3.scale.quantile().domain([0, d3.max(layouts, function (d) { return d3.max(d, function(d2) { return d2.impressions}) })]).range(colors);

  var xAxis = d3.svg.axis()
                  .scale(x)
                  .tickSize(0)
                  .tickPadding(6)
                  .orient("bottom");

  var svg = d3.select("#mrf-groupBarChart").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 layer = svg.selectAll(".layer")
                  .data(series)
                  .enter().append("g")
                  .attr("class", "layer");


  var rect = layer.selectAll("rect")
                  .data(function(d) { return d; })
                  .enter().append("rect")
                  .attr("x", function(d) {return x(d[graphParameter]); })
                  .attr("y", height)
                  .attr("width", x.rangeBand())
                  .attr("height", 0)
                  .style("fill", function(d, i) { console.log(d);return colorScale(d.impressions); });

  rect.transition()
      .duration(500)
      .delay(function(d, i) { return i * 10; })
      .attr("x", function(d, i, j) { return x(i) + x.rangeBand() / n * j; })
      .attr("width", x.rangeBand() / n)
      .transition()
      .attr("y", function(d) { return y(d[graphParameter]); })
      .attr("height", function(d) { return height - y(d[graphParameter]); });

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

var filler={ctr:0，印象：0，eCPM:0}；
var maxLen=d3.max（布局，函数（d）{return d3.max（布局，函数（d2）{return d2.length}））；
var len=布局。长度；
对于（变量i=0；i

我的初始布局变量包含类似于

[Array[9]、Array[21]、Array[10]、Array[10]、Array[5]、Array[4]、Array[1]

的内容，我正在填充内部数组，以便所有数组（在本例中）的长度都为21

这是前面代码的结果：

有人对如何解决这个问题有什么想法吗？很抱歉问了这么长的问题=）

---

提前谢谢。

关于标题上的打字错误……这是条形图，而不是条形图。显然，我不知道你想在这里做什么。你能不能不以一种非分组的方式画条？这可能是因为我是D3和整个图形世界的新手。你所说的就是我现在正在做的…为数组的每个元素创建一个svg，创建一个单独的图表…一旦我有了一个清晰的解决方案，我会发布它