2014-07-15 44 views
2

我在d3中編寫了一個函數,以便在樣本頁面中創建顯示不同數據集的多個圖。d3.layout.stack()與'擺動'偏移問題

我使用streamgraph和堆棧佈局,我不明白爲什麼用同樣的代碼,我可以用產生地塊作爲同時使用相同的數據集和相同的堆棧佈局wiggle偏移不產生偏移zeroexpandsilhouette任何東西。 (I已經讀不止一次的文檔)

隨函附上代碼的摘錄:

var stack = d3.layout.stack() 
    .values(function(d) { 
     return d.values; 
    }).offset(o || 'silhouette');// o could be one of [expand, wiggle, zero, silhouette] 

var layers = stack(stacked.datalayers()); // See after this piece of code 

var maxY = d3.max(layers, function(c) { 
    return d3.max(c.values, function(d) { 
     return d.y0 + d.y; 
    }); 
}); 

var x = d3.scale.ordinal().domain(stacked.x()).rangeRoundBands([0, w]); // stacked.x() returns an array with the min and the max values for X 
var y = d3.scale.linear().domain([0, maxY]).range([h, 0]); 

var area = d3.svg.area() 
     .x(function(d) { 
      return x(d.x) + (x.rangeBand()/2); 
     }) 
     .y0(function(d) { 
      return y(d.y0); 
     }) 
     .y1(function(d) { 
      return y(d.y0 + d.y); 
     }).interpolate("monotone"); 

... 

series.append("path") 
     .attr("d", function(d) { 
      return area(d.values); 
     }) 
     .style("fill", function(d) { 
      return color(cdomain.indexOf(d.name)); 
     }) 
     .style("fill-opacity", ".5") 
     .style("stroke", function(d) { 
      return color(cdomain.indexOf(d.name)); 
     }) 
     .style("stroke-width", "2px"); 

這是從stacked.datalayer()返回的數據的結構:

[ 
    { 
    "name": "US", 
    "values": [ 
     { 
     "x": "01/2014", 
     "y": 1.726118500604595, 
     "name": "US", 
     "y0": 0.8662854227545267 
     }, 
     { 
     "x": "02/2014", 
     "y": 2.5897229845496037, 
     "name": "US", 
     "y0": 0.38969767845094694 
     }, 
     { 
     "x": "03/2014", 
     "y": 2.388349800480026, 
     "name": "US", 
     "y0": 0.518912280793379 
     } 
    ] 
    }, 
    { 
    "name": "Europe28", 
    "values": [ 
     { 
     "x": "01/2014", 
     "y": 0.42541539123546496, 
     "name": "Europe28", 
     "y0": 2.5924039233591216 
     }, 
     { 
     "x": "02/2014", 
     "y": 0.5149863958976154, 
     "name": "Europe28", 
     "y0": 2.9794206630005506 
     }, 
     { 
     "x": "03/2014", 
     "y": 0.4579303752823291, 
     "name": "Europe28", 
     "y0": 2.907262081273405 
     } 
    ] 
    } 
] 

以下是結果的一些屏幕截圖(使用相同的數據集):

偏移「零」: offset 'zero'

偏移 '擴大': offset 'expanded'

偏移 '剪影': offset 'silhouette'

偏移 '蠕動': offset 'wiggle'

回答

3

documentation for stack.x

返回訪問者的值必須是一個數字。

默認訪問返回d.x,目前您的數據包含字符串此屬性(例如"01/2014")。您可以設置您自己的訪問者,也可以修改數據,以使x值爲數字。它隻影響wiggle模式的原因是它使用x值來計算梯度。

+0

非常感謝!現在它更清晰了! – chobin