Question

大家好，我开始用D3.js做一些工作并遇到问题。我需要制作一个分组的条形图，每组有一系列可变的系列。我已经按照这个很棒的教程http://bl.ocks.org/mbostock/3943967设法通过填充它来对我的初始数据进行一些更改来使其工作，因此每个组都有相同数量的系列。但这让我在图表上留下了很多空白。这是我到目前为止的代码

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

我的初始布局变量包含类似[Array[9], Array[21], Array[10], Array[10], Array[5], Array[4], Array[1]]的内容，我正在填充内部数组，以便所有这些变量都具有（在本例中）长度为21。

这是上一代码的结果：

有没有人对如何解决这个问题有任何想法？抱歉，长问题=）

提前致谢。

D3.js分组条形图变量系列数

0 个答案: