d3 - 將數據附加到軸進行重新縮放

Question

我想切換顯示實際值和百分比之間的比例。目前，數據是從csv文件導入的，我處理csv以查找數據的域並正確顯示圖表。我可以切換到顯示百分比，因爲軸域變爲0到100，但我希望能夠切換回實際的數據域而不必重新處理csv文件。

是否可以將數據附加到軸上以便我可以檢索它？ 類似這樣的：

 vis.append("g") 
       .data([calculated_y_domain, [0, 100]]) 
       .attr("class", "axis yaxis") 
       .attr("transform", "translate("+padding+",0)") 
       .call(yAxis); 

或者還有更好的方法嗎？

這裏有一個例子http://bl.ocks.org/3131368 我正在整理過程中，但是我這樣做的方式將取決於切換軸域的最佳方法。

Answer 1

您可以創建兩個使用兩個比例（百分比和數值）的軸組件，以及在轉換數據時在兩個軸之間切換。

var xAxisValue = d3.svg.axis() 
    .scale(valueScale) 
    .orient("bottom"); 
var xAxisPercentage = d3.svg.axis() 
    .scale(percentageScale) 
    .orient("bottom"); 

d3.select("svg").append("g") 
    .attr("class", "x-axis") 
    .call(xAxisValue); 

/* More code... */ 

// At the point you want to switch... 
var dur = 1500; 
d3.select(".x-axis").transition().duration(dur).call(xAxisPercentage);