d3 v4のゲージチャートに最小値と最大値を追加する

Question

私はd3 v4が新しく、最小値、最大値、実際の値を与えることができるゲージチャートを作成したい、針を60に表示したいminを50として、maxを80から0〜100の代わりに使用すると、thisのおかげで、minとmaxの値を除いて、ほとんどの要件が満たされました。私はデータを含む現在の値と以前の値を変更しようとしましたが動作しません。どんな助けも大歓迎です。私のプランカーlink

Answer 1

私はプランカーを更新しました。

リンク：デフォルトhttps://plnkr.co/edit/xa2d3YTxnxU5kBIOenLR?p=preview

、範囲値は0、180度です。したがって、カスタム範囲を追加するには、リニアスケールを作成し、その値をスケールに渡す必要があります。 ドメインが50であるため、これは80のようになります。

var scale = d3.scaleLinear().domain([50, 80]).range([0,180]);

そして、あなたの更新機能は、この

svg.selectAll(".needle").data([60]) 
    .transition() 
    .ease(d3.easeElasticOut) 
    .duration(2000) 
    .attr("transform", function(d) { 
     console.log(d, scale(d)); 
     return "translate(200,200) rotate(" + scale(d) + ")" 
    }); 

ようになります。