将最小值和最大值添加到 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) + ")"
    });