Question

我是D3Js.i的新手。我正在关注这个http://codepen.io/benlister/pres/bNeLQy堆积条形图。我不知道如何使y轴绝对。这里显示的是％。我尝试添加 y.domain([0,500]); 它没有用。请帮助。

Answer 1

首先，如果您正在谈论％符号，则必须更改刻度线格式。

代码是这样的：

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".0%"));

只需删除tickFormat，或将其更改为您想要的格式。

但是你的问题比这更大：y轴显示百分比，因为数据正在转换为百分比。这是进行数学运算的代码：

data.forEach(function (d) {
            var y0 = 0;

            d.rates = color.domain().map(function (name) {
                console.log();;
                return {
                    name: name,
                    y0: y0,
                    y1: y0 += +d[name],
                    amount: d[name]
                };
            });
            d.rates.forEach(function (d) {
                d.y0 /= y0;
                d.y1 /= y0;
            });

选中此示例，了解如何使用绝对值：

https://bl.ocks.org/mbostock/3886208

Answer 2

尝试更改此行 var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%")); 至 var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format("d")); 对于y轴上的整数值。

有关详细信息，请参阅here。

d3js中的堆积条形图

2 个答案: