將最小值和最大值添加到 d3 v4 中的儀表圖

Question

我是 d3 v4 的新手，想要構建一個儀表圖，我可以在其中給出最小、最大和實際針值，假設我希望針顯示為 60，最小值為 50，最大值為 80，而不是 0 到 100，感謝this問題，除了最小值和最大值之外，幾乎我的要求都滿足了。 我試過更改當前和以前的值，包括數據，不起作用。 任何幫助深表感謝。 我的plunker鏈接

Answer 1

我已經更新了plunker。

鏈接： 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) + ")"
    });