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

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

我正在努力记住针的最后位置/角度，但我似乎无法做到正确...

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

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

Answer 1

@Robert的评论正是如此。这是js小提琴。

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

// 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 needle functon new：

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

Answer 2

首先定义一个这样的变量：

var angle = 0;

然后在tweenNeedle函数中使用这样的旧值：

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

}

工作代码here

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

2 个答案: