时间戳

首页 > 解决方案 > 不从零开始的条形图

d3.js - 不从零开始的条形图

问题描述

我在这里有一个 stackblitz - https://stackblitz.com/edit/d3-start-above-zero?embed=1&file=index.js&hideNavigation=1

这是一个超级简单的条形图，只有一个条形

y 轴显示 0-200 的值

条形的值从 50 开始，到 150 结束，所以我想在这些值处绘制条形，这样条形就会位于图表中心的某个位置。

我有点高，但无法固定 y 位置。

标签： d3.jssvg

解决方案

您可以使范围从0到height...

scale.range([0, height])

...或height从0...

scale.range([height, 0])

...但这并没有改变这样一个事实，即在 SVG 中，y轴的坐标系从页面的顶部到底部。因此，该y属性必须始终小于矩形的height。

话虽如此，您必须使用finish该y属性：

.attr("y", function (d, i) {
    return y(d.finish);
})
.attr("height", function(d,i){
    return y(d.start) - y(d.finish);
});

这是更新的代码：https ://stackblitz.com/edit/d3-start-above-zero-qnk7bl?file=index.js

推荐阅读