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