d3 - 将数据附加到轴以进行重新缩放 [英] d3 - attaching data to an axis for rescaling

问题描述

我想在标尺上显示实际值和百分比之间切换。目前，数据是从csv文件导入的，我处理csv以找到数据的域，并显示图表罚款。我可以切换到显示百分比，因为轴域变为0到100，但我想能够切换回实际的数据域，而不必重新处理csv文件。

I want to switch between showing actual values and percentages on a scale. At present the data is imported from a csv file and I process the csv to find the domain for the data and display the chart fine. I can switch to showing percentage because the axis domain becomes 0 to 100, but I want to be able to switch back to the actual data domain without having to reprocess the csv file.

是否可以将数据附加到轴，以便我可以检索它？
这样的东西：

Is it possible to attach the data to the axis so I can retrieve it? Something like this:

     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
其中

There is an example here http://bl.ocks.org/3131368 Which I am in the process of tidying up, but the way I do it will depend on the best approach to switching the axis domain.

推荐答案

您可以创建两个轴组件，它们利用您的两个刻度（百分比和值），以及在转换数据时在两个轴之间转换。

You could create two axis components which utilize your two scales (percentage and value), and transition between the two axes when you transition your data.

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

这篇关于d3 - 将数据附加到轴以进行重新缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！