D3JS中展示线性和对数比例尺之间动画转换的示例？

Question

D3JS中展示线性和对数比例尺之间动画转换的示例？

javascriptd3.js

3

我相信如果能找到一个展示我所尝试做的事情的例子，我就可以进行逆向工程/重新实现它。有人看到过在D3JS中显示线性和对数刻度之间平滑/动画转换的示例吗？

我已经分别使用了两个刻度，但是我必须重新加载页面才能更改刻度。

我的谷歌搜索技能失败了！

非常感谢。

- user986122

为什么不将函数f(x)=t*x^(1/t)应用于轴值，其中t从0(+epsilon)到1范围内变化...这应该在对数和线性之间进行插值。对数函数只是在趋近于零的极限处取上述函数。 - nbonneel

我不确定如何在不刷新页面的情况下实际更改比例尺。原则上，我想我可以使用该函数来定义比例尺，但是我该如何重新生成比例尺并在它们之间进行过渡呢？ - user986122

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

这是一个概念验证的jsfiddle。您只需重新选择数据点并使用新比例重新绘制它们。对于轴标签，转换甚至更简单--您只需要再次调用轴函数即可。下面是相关摘录。

// change to log scale...
yScale = d3.scale.log().domain([1, 100]).range([dim-padding,padding]);

svg.selectAll("circle").data(data)
   .transition().delay(1000).duration(1000)
   .attr("cx", function(d) { return xScale(d); })
   .attr("cy", function(d) { return yScale(d); });

svg.selectAll(".y")
   .transition().delay(1000).duration(1000)
   .call(yAxis.scale(yScale));

你可能需要尝试不同的标签生成方式，让它看起来“好看”一些，但原则上 d3 会负责整个过渡过程。