Adding min and max values to gauge chart in d3 v4

问题

I am new to d3 v4, want to build a gauge chart where i can give min, max and actual needle value, lets say i want the needle to be shown at 60 with min as 50 and max as 80 instead of 0 to 100, thanks for this SO question where almost my requirement met except with min and max values. I've tried changing current and previous values including data, doesn't work. Any help is much appreciated. my plunker link

回答1:

I have updated the plunker.

Link: https://plnkr.co/edit/xa2d3YTxnxU5kBIOenLR?p=preview

By default, the range value is 0, 180 degrees. So to add custom range you need to create a linear scale and pass the values to the scale. Since your domain is 50, 80 this is how the scale would look like.

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

And your update function would look like this

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

来源：https://stackoverflow.com/questions/46966889/adding-min-and-max-values-to-gauge-chart-in-d3-v4