d3-将数据附加到轴以进行重新缩放

d3 - attaching data to an axis for rescaling

本文关键字：新缩放 缩放 数据 d3-      更新时间：2023-10-23

我想在显示实际值和比例百分比之间切换。目前，数据是从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我正在整理，但我这样做的方式将取决于切换轴域的最佳方法。

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

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);
相关文章：