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