无法可视化百分比数字(获取 NaN)

Question

有没有人知道为什么我不能在下面生成百分比代码是这里（第 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

"除了数字之外，D3还支持格式化和分析日期以及逗号分隔值。

如果替换

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

不工作。

我的猜测是不支持某个功能。所以我把你的代码放在另一个函数中，并在小提琴中返回了这个结果。

Answer 2

一种解决方案是计算 .text（function（d）{}） 函数中的百分比。（此代码可能会缩短一点。

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