如何添加针规? [英] How to add needle to gauge?

问题描述

我正在尝试创建d3 v4量规，尽管设置了量规背景色，但即使我对其值进行了硬编码，也无法显示指针.

I am trying to create a d3 v4 gauge and whilst I have the gauge background colors set, I cannot get the needle to display, even if I hard code the value for it.

不确定在这里我在做什么错. Plnkr: https://plnkr.co/edit/K9XdtwN2yhiTezuOwVpe?p=preview

Not sure what I am doing wrong here. Plnkr: https://plnkr.co/edit/K9XdtwN2yhiTezuOwVpe?p=preview

needle.data( 33 )
    .transition()
    .ease( d3.easeElasticOut )
    .duration( 2000 )
    .attr( "transform", function( d ) {
    // r = 180 * d / data[ 1 ]
       r = 33;
       return " translate(200,200) rotate(" + r + ")"
    });

推荐答案

代替

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

应为:

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

接下来，当您创建针时，必须给它一个这样的类:

Next when you create the needle you must give it a class like this:

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

这样您就可以进行这样的过渡了:

So that you can give transition like this:

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

工作代码此处

这篇关于如何添加针规?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！