示例顯示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會照顧整個轉換。