Question

我是d3 v4的新手，想要建立一个仪表图表，我可以给出最小值，最大值和实际针值，让我说我希望针头显示为60，最小值为50，最大值为80而不是0到100，感谢this所以问题几乎满足我的要求，除了最小值和最大值。我已经尝试更改当前和以前的值，包括数据，不起作用。任何帮助深表感谢。我的plunker 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) + ")"
    });

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

1 个答案: