示例显示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将负责整个过渡。