Question

我一直在与d3合作，试图让时间从一种状态正确转换到另一种状态。我知道d3.interpolateString会选出可以从传入的字符串中插入的数字。

我正在使用MM：SS格式的时间。发生的事情是插值时的数字最终会在转换中转换为十进制。另外，最终状态为09:02的例子只会产生9：2的结果，因为它似乎删除了零。

到目前为止，我一直在使用这个：

// selector - d3 selector
function setupStringInterpolation(selector, duration, text){
    selector
        .transition()
        .duration(duration)
        .tween("string", function(){
            var node = d3.select(this),
            i = d3.interpolate(node.text(), text);
            return function(t){
                node.text(i(t));
            }
        });
}

这个小提琴应该更有意义：https://jsfiddle.net/wwwykmk8/

Answer 1

我采用了稍微不同的路线来实现这一目标。我正在使用d3.interpolateDate，因此我们可以直接处理日期对象，并使用d3.timeFormat仅输出minute对象的second和date部分。< / p>

var d1 = new Date("2015-03-25");
d1.setMinutes(0);
d1.setSeconds(0);
var d2 = new Date("2015-03-25");
d2.setMinutes(9);
d2.setSeconds(2);

function setupStringInterpolation(selector, duration, text){
    var format = d3.timeFormat("%M:%S");
        selector
            .transition()
            .duration(duration)
            .tween("string", function(){
                var node = d3.select(this),
                i = d3.interpolateDate(d1, text);
                return function(t){
                    node.text(format(i(t)));
                }
            });
}

var finalValue = "01-01-2017";
setupStringInterpolation(d3.select("#timeSpot"), 1500, d2);

JSFiddle - https://jsfiddle.net/9w5km9sx/

Answer 2

如果您看到docs。

d3.interpolate（a，b）

返回两个任意值a和b之间的插值器。内插器实现基于结束值b的类型，使用以下算法：

...如果b是a       数字，请使用interpolateNumber。   ...如果b是日期，请使用interpolateDate。

如果您想在特定日期的9:00到9:20之间插补，那么您需要传入日期对象作为参数。您可以将文本转换为日期对象。

上面的家伙打败了我，但这是我为你的代码改变的：

function setupStringInterpolation(selector, duration, text){
        selector
            .transition()
            .duration(duration)
            .tween("string", function(){
                var node = d3.select(this);
                var nodeText = node.text();
                var format = d3.timeFormat("%M:%S");
                startDate = new Date().setHours(nodeText.substr(0,2),nodeText.substr(3));
                endDate = new Date().setHours(text.substr(0,2),text.substr(3));
                var i = d3.interpolate(startDate,endDate);

                return function(t){
                    node.text(format(i(t)));
                }
            });
}

var finalValue = "09:02";
setupStringInterpolation(d3.select("#timeSpot"), 1500, finalValue);

这里的小提琴：https://jsfiddle.net/wwwykmk8/

使用d3.interpolateString进行MM：SS转换

2 个答案: