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

“除数字外，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;}});
;

无法显示百分比数字（获得NaN）

2 个答案: