以百万英镑显示 Y 轴值的最佳方式

Posted 2023-04-14

【中文标题】以百万英镑显示 Y 轴值的最佳方式

【英文标题】：Best way to show Y axis values in Millions of £

【发布时间】：2017-08-09 15:01:51

【问题描述】：

我有这种格式的数据：

["EndDate":"2012","Value":26473660,
 "EndDate":"2013","Value":54296732,
 "EndDate":"2014","Value":64063400,
 "EndDate":"2015","Value":81812464,
 "EndDate":"2016","Value":86899274]

我已经成功地渲染了一个条形图。但是，Y 轴值在比例上下仅显示“000”。

这里是 y 轴的相关代码部分。

var y = d3.scale.linear()
        .range([height, 0]);

....

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

....

y.domain([0, d3.max(dataset, function(d)  return d.Value; )]);

....

        svg.append("g") //Y AXIS ENTER
        .attr("class", "y axis")
        .call(yAxis)
    .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Value in £");

我在 bostocks 网站上查看了 d3.ticks/d3.tickFormat 函数，但没有关注实际情况。本质上，我想展示一种用于显示百万的简写方式：0M、10M、20M、30M.. 以获得简单的解决方案。

如有重复请见谅。它可能是但似乎找不到适用于我的数据集风格的解决方案：/

提前致谢。

【参考方案1】：

将.tickFormat('.0s') 添加到您的yAxis 定义中。

见：

Format Y axis values, original figures in millions, only want to show first three digits

D3: Formatting tick value. To show B (Billion) instead of G (Giga)