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