javascript - 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 が移行全体を処理します。