javascript - 无法可视化百分比数字(得到 NaN)

Question

有谁知道为什么我不能在下面生成百分比 codeIshere (第 97-117 行)？

var format=d3.format(".1%");

var percent = format(function(d){
                    if (d[values[0]]>d[values[1]]) {return (d[values[0]]-d[values[1]])/d[values[0]];}
                    else {return (d[values[1]]-d[values[0]])/d[values[1]];}});

bar1.append("text")
.attr("class", "label")
.attr("x", function(d) { return x(d.id) + 16; })
.attr("y",  function(d) {
                if (d[values[0]] > d[values[1]]) {return y(d[values[0]]) - 35;}
                else {return y(d[values[1]]) - 35;}})
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("fill", function(d) {
                if (d[values[0]] > d[values[1]]) {return "green";}
                else {return "red";}})
.text(function(d){
        if (d[values[0]]>d[values[1]]) {return "-" + percent;}
        else {return  percent;}});

我整个早上都在玩它，我没主意了。我在其他帖子中找不到答案。

任何帮助将不胜感激!谢谢!

Answer 1

这是工作代码:https://jsfiddle.net/3860zcc3/15/

根据格式化文档

https://github.com/mbostock/d3/wiki/Formatting

"In addition to numbers, D3 also supports formatting and parsing dates, and comma-separated values."

如果你更换

var percent = format(function(d){
                        if (d[values[0]]>d[values[1]]) {return (d[values[0]]-d[values[1]])/d[values[0]];}
                        else {return (d[values[1]]-d[values[0]])/d[values[1]];}}

像这样的数字

var percent = format(2);

格式化有效。

但即使是像这样的简单函数:

var percent = format(function(d){return 2;});

不工作。

我猜是一个功能不受支持。所以我将您的代码放入另一个函数中，并在 fiddle 中返回该结果。