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