javascript - d3.js 仪表针随动态数据旋转

Question

我是 d3.js 的新手，我正在尝试用针制作一个仪表。

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

问题是，每当数据发生变化时，指针总是从开始位置而不是最后位置旋转。

我试图记住针的最后位置/Angular ，但我似乎无法记住......

我应该怎么做才能解决这个问题？

这是我到目前为止所做的事情。 https://jsfiddle.net/pq7t2obc/8/提前致谢!

Answer 1

正如 @Robert 的评论所述。这是 js fiddle 。

只需存储旧的旋转并使用它来补间到新的计算位置，如下所示。

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

补间针功能新:

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