示例显示D3JS中线性和对数刻度之间的动画过渡？

Question

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

我有两个秤独立工作,但我必须重新加载页面来改变比例.

我的谷歌技能让我失望了!

非常感谢.

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将负责整个过渡.