D3.js 如何将指针添加到仪表？

我正在尝试创建d3 v4仪表，虽然设置了仪表背景色，但无法显示指针，即使我硬编码了其值

我不知道我做错了什么。 Plnkr：

而不是这个

var needle = svg.selectAll( ".needle" )
    .data( 0 ) 

应该是：

var needle = svg.selectAll( ".needle" )
    .data( [0] ) //should be in array

接下来，当您创建针时，必须为其设置如下类：

var needle = svg.selectAll( ".needle" )
    .data( [0] )
    .enter()
    .append( 'line' )
    .attr( "x1", 0 )
    .attr( "x2", -78 )
    .attr( "y1", 0 )
    .attr( "y2", 0 )
    .classed("needle", true)//give it a class

    svg.selectAll( ".needle" ).data( [103] )
        .transition()
        .ease( d3.easeElasticOut )
        .duration( 2000 )
        .attr( "transform", function( d ) {
            return "translate(200,200) rotate(" + d + ")"
        });

这样您就可以进行如下转换：

var needle = svg.selectAll( ".needle" )
    .data( [0] )
    .enter()
    .append( 'line' )
    .attr( "x1", 0 )
    .attr( "x2", -78 )
    .attr( "y1", 0 )
    .attr( "y2", 0 )
    .classed("needle", true)//give it a class

    svg.selectAll( ".needle" ).data( [103] )
        .transition()
        .ease( d3.easeElasticOut )
        .duration( 2000 )
        .attr( "transform", function( d ) {
            return "translate(200,200) rotate(" + d + ")"
        });

---

工作代码

我想在我的应用程序中使用此图表，试图理解该图表，比如显示最小值和最大值之间的指针。例如，我想显示60针，其中最小值为40，最大值为90。你能告诉我在哪里可以更改它吗？我尝试更改当前和以前的值，包括数据，但不起作用。用最少的可验证代码提出一个SO问题。我相信你会得到帮助你的问题有点接近myn你介意检查一下吗？