如何使用刻度和 d3.format 将字符串附加到 y 轴数据？答案

【问题标题】：How can I append string to y-axis data with tick and d3.format?如何使用刻度和 d3.format 将字符串附加到 y 轴数据？
【发布时间】：2019-09-08 03:43:59
【问题描述】：

我正在使用 C3.js 制作一个非常简单的堆积条形图。 https://c3js.org/samples/chart_bar_stacked.html 。我希望能够将文本附加到值，特别是 +“Mb”，以便我的最终用户知道这些数字表示兆位，而不是其他任何东西。我添加了一个有用的 y 轴标签，但对于我的问题，我想知道如何利用 d3.js 来执行值的格式化。

我使用了 d3.format，这表明我可以附加字符串，但还没有想出如何将其拉下来。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 2000, 2000, 4000],
            ['data2', 1300, 1000, 500],
            ['data3', 2000, 2000, 2500]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2']
        ]
    },
    axis: {
        y: {
            label: {
                text: 'Bandwidth Usage (Mb)',
                position: 'outer-middle'
            },
            tick: {
                format: d3.format('') + "mb"
            }
        }
    }
});

这没有按预期工作，我收到“TypeError：this.tickFormat is not a function”。想知道是否有任何 c3 大师可以帮助我解决这个问题？谢谢！！

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

你可以写一个刻度函数如下：

tick: 
      {
        format: function (d) {
            if ((d) > 0) {
                d = d + "Mb";
                }
            return d;
        }
      },

我已经为 d 使用了 >0，所以如果 d 不为 0，“Mb”只会被附加到 d，但您也可以扩展代码以自动转换输入：

 tick: 
       {
         format: function (d) {
             if (((d / 1000) >= 1) & ((d / 1000) < 1000)) {
                  d = Math.round((d / 1000 )*100) / 100 + "Kb";
                  }
             else if ((d / 1000000) >= 1) {
                  d = Math.round((d / 1000000 )*100) / 100 + "Mb";
                  }
             return d;
          }
        },

通过这样做，您可以使用未转换的数据作为输入，它会将其转换为“Kb”或“Mb”单位。 100组小数点后2位。

【讨论】：