在 d3 v4 中向仪表图表添加最小值和最大值

Question

我是 d3 v4 的新手，想要构建一个仪表表，我可以在其中给出最小、最大和实际针值，假设我希望针显示为 60，最小值为 50，最大值为 80 而不是 0到 100，感谢this SO 问题，除了最小值和最大值之外，我的要求几乎都满足了。我尝试更改当前和以前的值，包括数据，但不起作用。任何帮助深表感谢。我的笨蛋link

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