ゲージに針を追加するには？

Question

私はd3 v4ゲージを作成しようとしていますが、ゲージの背景色が設定されていますが、値をハードコードしても針が表示されません。

ここで間違っていることはわかりません。 Plnkr：https://plnkr.co/edit/K9XdtwN2yhiTezuOwVpe?p=previewは、代わりにこの

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

の

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]) //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