MM：SSトランジションにd3.interpolateStringを使用する

Question

私はd3を使用して、ある状態から別の状態に適切に移行する時間を得ようとしています。私はd3.interpolateStringが渡された文字列から補間できる数値を選ぶことを知っています。

MM：SSの形式で作業しています。何が起こっているのかは、補間されるときの数値が、遷移で10進数に変換されることです。さらに、9時02分の最終状態の例は、ゼロを削除するように見えるので、結果は9：2になります。ここで

は、私がこれまでに取り組んできたものです：あなたが docsが表示された場合 https://jsfiddle.net/wwwykmk8/

Answer 1

私はこれを達成するためにわずかに異なるルートを行ってきました。私はd3.interpolateDateを使用していますので、日付オブジェクトを直接扱い、オブジェクトのminuteとsecond部分のみを出力するためにd3.timeFormatを使用しています。

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

：

// 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)); 
      } 
     }); 
} 

このフィドルはそれのより多くの意味を確認する必要があります。

d3.interpolate（B）

任意の2つの値AとBとの間の補間を返します。 bは 数場合、interpolateNumberを使用...

：補間の実装は、以下のアルゴリズムを使用して、最終値bのタイプに基づいています。 ... bがの場合、日付がの場合は、interpolateDateを使用します。

特定の日に9時から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/