如何添加针规? [英] 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屋!
查看全文