Question

我正在尝试创建一个d3 v4测量仪，虽然我设置了仪表背景颜色，但我无法显示针，即使我对其进行硬编码也是如此。

不确定我在这里做错了什么。 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 + ")"
    });

Answer 1

而不是这个

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

工作代码here

如何加针测量？

1 个答案: