javascript - 在 D3JS 中显示线性和对数刻度之间的动画转换的示例？

Question

我非常确定，如果我能找到一个示例来展示我正在尝试做的事情，我就可以对其进行逆向工程/重新实现。有没有人看到过在 D3JS 中显示线性和对数刻度之间的平滑/动画过渡的示例？

我有两个独立工作的秤，但我必须重新加载页面才能更改秤。

我的 Google 技能让我失望了!

非常感谢。

Answer 1

这是一个概念证明 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 将负责整个转换。