d3.js - React-vis y axis scale

Question

I have a bar chart in a react-vis component. I allow react-vis to calculate the y axis but it never seems to go to the end of the full range of y values.

For example...

This is what I get by default..,

What I want to achieve is something like this...

I can get what I want by changing a single line in node_modules/d3-array/src/ticks.js.

If I change this line...

while (++i < n) ticks[i] = (start + i) * step;

to

while (++i <= n) ticks[i] = (start + i) * step;

then, 1 extra tick value is generated and using CSS I can make it visible which satisfies my requirement. I don't want to go editing the source here.

Does anyone know of another way to achieve the same result?

Answer 1

对于父 XYPlot 组件，您可以使用 yDomain 控制显示的范围。

对于您的示例，请尝试以下操作： yDomain={[0, maxValue * 1.25]}