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

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

我有两个秤都独立工作，但我必须重新加载页面来更改比例。

我的Google技巧让我失望！

非常感谢。

2013-04-14 user986122

为什么不逐步应用到你的坐标轴上，函数'f（x）= t * x ^（1/t）'对于从'0（+ epsilon）到'1'范围内的't'......那应该在日志和线性之间插值。一个对数函数就是上面的函数，它是在向零的极限处取得的。 – WhitAngl

我不确定如何在不刷新页面的情况下实际更改比例。原则上，我想我可以用这个函数来定义一个比例尺，但是我怎样才能重新生成它们之间的比例和转换？ – user986122

这里是概念证明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会照顾整个转换。

来源

2013-04-14 11:12:14

非常感谢！你钉了它！我不知道为什么我认为我根本不需要修改数据，但现在有意义。 – user986122

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

回答

相关问题