d3.js将数组数据映射从标准化到定期堆栈图

Question

我可以创建标准化堆积条形图和常规堆积条形图。我希望能够根据用户的选择在两者之间进行转换。

我创建了一个功能，我的数据映射到下面的代码正态分布：

 function dataMapNormalize(data) { 
     /* 
     http://jsfiddle.net/dB96T/4/ 
     manually create data points for stacked bar chart with y0 values 
     */ 

     data = data.map(function (d, i) { 
      console.log("length:" + d.length); 
      var j, 
       columnTotal = 0, 
       y0 = 0; 
      for (j = 0; j < d.length; j++) { 
       columnTotal += d[j].value; 
      } 

      for (j = 0; j < d.length; j++) { 
       var y = d[j].value/columnTotal; 
       d[j] = {x: i, y: y, y0: y0}; 
       y0 += y; 
      } 
      return d; 
     }); 
     console.log(JSON.stringify(data)); 

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

     x = d3.scale.ordinal() 
      .rangeRoundBands([100, width], .05) 
      .domain(data.map(function (d) { 
       return d[0].x 
      })); 
    } 

dataMapNormalize(ond); 

该函数永久改变了我的数组“OND”以矩形坐标的数组，这是伟大的。 ..除非我想展示一个非标准化的堆叠条形图。如果我尝试传递给下面的函数，我会得到NAN。

function dataMapStack(data) { 

     var stackTotals = new Array(); 

     data = data.map(function (d, i) { 
      var j, 
       columnTotal = 0, 
       y0 = 0; 
      for (j = 0; j < d.length; j++) { 
       columnTotal += d[j].value; 
      } 
      stackTotals.push(columnTotal); 
      for (j = 0; j < d.length; j++) { 
       var y = d[j].value; 
       d[j] = {x: i, y: y, y0: y0}; 
       y0 += y; 
      } 
      return d; 
     }); 

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

     x = d3.scale.ordinal() 
      .rangeRoundBands([100, width], .05) 
      .domain(data.map(function (d) { 
       return d[0].x 
      })); 
    } 

我敢肯定，有一个更优雅的方式来解决这个问题。打开任何建议。

Answer 1

我想通了。我只是添加了更多的元素到我的data.map函数，以便数组现在具有yp（百分比/规格化）和y（规则堆栈）值。 （duh！）我很可能会将x/y比例移出该函数。这是一个很大的帮助：http://bl.ocks.org/tmaybe/6144082

function dataMap(data) { 
     /* 
     http://jsfiddle.net/dB96T/4/ 

     create rectangle dimensions for stacked bar chart 

     yp = y percentage/normalized 
     y = regular stack 
     */ 

     data = data.map(function (d, i) { 
      console.log("length:" + d.length); 
      var j, 
       columnTotal = 0, 
       yp0 = 0, 
       y0 = 0; 

      // Count total of each stack 
      for (j = 0; j < d.length; j++) { 
       columnTotal += d[j].value; 
      } 

      for (j = 0; j < d.length; j++) { 
       var y = d[j].value; 
       var yp = d[j].value/columnTotal; 
       d[j] = {x: i, yp: yp, yp0: yp0, y:y, y0:y0}; 
       yp0 += yp; 
       y0 +=y; 
      } 
      return d; 
     }); 
     console.log(JSON.stringify(data)); 

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

     x = d3.scale.ordinal() 
      .rangeRoundBands([100, width], .05) 
      .domain(data.map(function (d) { 
       return d[0].x 
      })); 
    }