如何在y轴上以KB、MB、GB、TB的形式显示数据

Question

我正在绘制一张显示服务器流量的图表。我希望在y轴上显示单位为KB、MB等。您有什么意见，如何通过d3轴比例尺来实现这一点。

- Dania

---

请问您能否详细说明您希望它看起来的样子？您是否希望KB和MB在同一轴上？刻度是否为线性？您是否只想在值达到某个特定阈值时才显示KB？ - RobinL

我想要一个线性刻度。理想情况下，KB和MB不应该在同一刻度上，是的，我们可以对值进行阈值处理，以获得所有值的统一刻度。例如，如果数据中最高的流量是150KB，则y轴上的结果刻度可能是0 KB、50 KB、100 KB、150 KB。 - Dania

这个解决方案离我所需的还很接近，但并没有完全解决。我的要求是创建一个线性刻度，就像我在上面的评论中描述的那样。 - Dania

Answer 1

你可以使用 d3.tickFormat 函数 来实现：演示。

var bytesToString = function (bytes) {
    // One way to write it, not the prettiest way to write it.

    var fmt = d3.format('.0f');
    if (bytes < 1024) {
        return fmt(bytes) + 'B';
    } else if (bytes < 1024 * 1024) {
        return fmt(bytes / 1024) + 'kB';
    } else if (bytes < 1024 * 1024 * 1024) {
        return fmt(bytes / 1024 / 1024) + 'MB';
    } else {
        return fmt(bytes / 1024 / 1024 / 1024) + 'GB';
    }
}

var xScale = d3.scale.log()
               .domain([1, Math.pow(2, 40)])
               .range([0, 480]);

var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('left')
                .tickFormat(bytesToString)
                .tickValues(d3.range(11).map(
                    function (x) { return Math.pow(2, 4 * x); }
                ));

你还需要使用自己的数值来替换tickValues，以使内容更加贴近实际情况。

- musically_ut