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

Question

我正在使用 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 专家可以帮助我解决这个问题？谢谢！！

Answer 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位

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

How can I append string to y-axis data with tick and d3.format?

javascript

d3.js

c3.js