쉼표로 svg 텍스트 증가

Question

d3.js에서 한 문자를 다른 숫자로 증가 시키려고합니다. This example은 정확히 내가 원하는 것을 수행하지만 숫자가 아닌 달러 기호와 쉼표가있는 숫자를 전달해야합니다. 내가 포맷 한 값을 전달하려고하면 NaN이 반환됩니다. 어떤 충고?

예 :

function numberWithCommas(x) { 
     var parts = x.toString().split("."); 
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     return parts.join("."); 
    } 
var foo = numberWithCommas(2000); //foo now = 2,000 

d3.select('body') 
    .text(0) 
    .transition() 
    .duration(duration) 
    .ease('linear') 
    .tween("text", function() { 
    var i = d3.interpolate(this.textContent, foo); 
    return function(t) { 
    this.textContent = Math.round(i(t)); 
    }; 
}); 

편집 : 내 솔루션 :

d3.select("#totaltext") 
      .transition() 
      .duration(500) 
      .ease('linear') 
      .tween("text", function() { 
       var i = d3.interpolate(this.textContent, sum); 
       return function(t) { 
        this.textContent = '$' + d3.format(",")(Math.round(i(t))); 
       }; 
       }) 

Answer 1

당신은 $와 쉼표 기호,이 같은 것을 제거해야 할 것 ...

var number = Number(x.replace(/[^0-9\.]+/g,"")); 

통화를 보간하려면해야합니다. 0

d3.interpolators.push(function(a, b) { 
    var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f"); 
    if ((ma = re.exec(a)) && (mb = re.exec(b))) { 
    a = parseFloat(ma[1]); 
    b = parseFloat(mb[1]) - a; 
    return function(t) { 
     return "$" + f(a + b * t); 
    }; 
    } 
});