javascript - D3.js - 格式化数字 - 引发错误

Question

我正在使用 angularjs 来开发我的应用程序。我集成了来自 d3.js 的图表，我从 json 中获取了一个数字，需要将其转换为金钱并显示在图表的中心。

我尝试了这样的示例:

var text = group.selectAll("text.title")
            .data(data)
            .enter();

text.append("text")
    .classed("title-total", true )
    .text( function (d, i) {
    if( catg === "payStTotalGraph" )
            var format = d3.format("00,000,0000");
            console.log ( format(123456)); //output as 123,456 instead of 12,356
            return d[i].value;

})
.attr("text-anchor","middle")
.attr("transform", "translate(" + 0 + "," + 20 + ")");

Angular 抛出错误:

TypeError: format is not a function
    at SVGTextElement.<anonymous> (dirProjectSummary.js:328)
    at SVGTextElement._a.text.arguments.length.each.function.n.textContent (d3.min.js:3)
    at d3.min.js:3
    at Y (d3.min.js:1)
    at Array._a.each (d3.min.js:3)
    at Array._a.text (d3.min.js:3)
    at drawPaymentGraph (dirProjectSummary.js:324)
    at dirProjectSummary.js:262
    at Object.m [as forEach] (angular.js:350)
    at Object.<anonymous> (dirProjectSummary.js:250)

在 d3js 中以 Angular 格式化数字的正确方法是什么？

提前致谢。

Answer 1

与 Angular 完全无关。 问题在于您的 if 语句中没有使用 { 和 } 。正确的代码是(至少我认为):

text.append("text")
    .classed("title-total", true )
    .text( function (d, i) {
    if( catg === "payStTotalGraph" ) { // <- opening
            var format = d3.format("00,000,0000");
            console.log ( format(123456)); //output as 123,456 instead of 12,356
            return d[i].value;
    } // <-- closing
})

我认为您的程序的这一小部分尚未完成，因为您仅在 console.log 中使用格式函数。但缺少大括号是导致 TypeError 的原因。

如果您不知道:JavaScript 没有 block 作用域并且变量是提升的。网络上有很多关于 JavaScript 作用域和提升的文章。