d3.js Gauge Nadel mit dynamischen Daten drehen

Question

Ich bin neu zu d3.js, und ich versuche, ein Messgerät mit einer Nadel zu machen.

var margin = { top: 0, left: 0, right: 0, bottom: 0 }, 
    width = 800, 
    height = 600; 

var maxVal = 12; 

var svg = d3.select(".container").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var bgArc = d3.svg.arc() 
    .outerRadius(100) 
    .innerRadius(10) 
    .startAngle(0) 
    .endAngle(2 * Math.PI); 

var needleScale = d3.scale.linear().domain([0, 360]).range([0, 180]); 

//draw donut 
var wrap = svg.append("g") 
    .attr("class", "wrap") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

wrap.append('g') 
    .attr('class', 'donut') 
    .append("path") 
    .attr("d", bgArc) 
    .style("fill", "white") 
    .style("stroke-width", 2) 
    .style("stroke", "white"); 

wrap.append('g') 
    .attr('class', 'outerMostCircle') 
    .append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", 108) 
    .style("stroke", "white") 
    .style("stroke-width", 2) 
    .style("fill", "transparent"); 

//draw needle 
var needle = wrap.append('g') 
    .attr("class", "needle") 
    .append("line") 
    .attr("x1", 0) 
    .attr("y1", 0) 
    .attr("x2", 0) 
    .attr("y2", -102) 
    .attr("stroke-width", 6) 
    .attr("stroke", "coral"); 

// add text 
var text = svg.append("g") 
    .attr("class", "text") 
    .append("text") 
    .attr("transform", "translate(" + width/2.2 + "," + height/4 + ")") 
    .attr("font-size", "2em"); 

setInterval(function() { 
    curVal = Math.floor(Math.random()* 12); 
     d3.select('.needle').select('line') 
      .transition() 
      .duration(1000) 
      .attrTween('transform', function() { 
     return tweenNeedle(curVal, maxVal); 
     }); 

    text.datum(curVal).text(function(d) { 
     return d + " m/s"; 
    }); 
}, 1500); 

function tweenNeedle(data, max) { 
    return d3.interpolateString("rotate(0)", "rotate(" + (data/max * 360) + ")"); 
} 

function getEndAngle(data, max) { 
    return data/max * 2 * Math.PI; 
} 

wrap.append('g') 
    .attr('class', 'outerCircle') 
    .append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", 20) 
    .attr("fill", "pink"); 

wrap.append('g') 
    .attr('class', 'innerCircle') 
    .append("circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", 10) 
    .attr("fill", "#666"); 

Das Problem ist, dass die Nadel immer dann, wenn sich die Daten ändern, von Anfang an statt ihrer letzten Position rotiert.

Ich versuche, die letzte Position/Winkel der Nadel zu erinnern, aber ich kann nicht scheinen, richtig zu machen ...

Was soll ich tun, um dieses Problem beheben?

Hier ist was ich bisher gemacht habe. https://jsfiddle.net/pq7t2obc/8/ Vielen Dank im Voraus!

Answer 1

zunächst eine Variable wie folgt definieren:

var angle = 0; 

Dann in tweenNeedle Funktion Gebrauch des alten Wertes wie diese machen :

function tweenNeedle(data, max) { 
    var prevAngle = angle;//get the old angle 
     angle = (data/max * 360);//update it with the latest angle. 
     return d3.interpolateString("rotate(" +prevAngle+")", "rotate(" + (data/max * 360) + ")"); 

} 

Code arbeiten here

Answer 2

Genau das, was der Kommentar von @Robert sagt. Hier ist die JS Geige.

Speichern Sie einfach die alte Rotation und verwenden Sie diese, um wie in der neuen berechneten Position zu tweenen.

// Define global variable 
var lastRotationAngle = "rotate(0)"; 

// Calculate new tween and return InterpolateString into variable. 
// inside .attrTween('transform', function() { 
var interpolateString = tweenNeedle(lastRotationAngle, curVal, maxVal); 

// Update lastRotationAngle 
lastRotationAngle = "rotate(" + (curVal/maxVal * 360) + ")"; 

// Return the InterpolateString 
return interpolateString; 

https://jsfiddle.net/pq7t2obc/8/

Tween Nadel functon neu:

function tweenNeedle(oldRotation, data, max) { 
    return d3.interpolateString(oldRotation, "rotate(" + (data/max * 360) + ")"); 
}