d3.js yaxis不能正确绘制所有的tick [英] d3.js yaxis not drawing all the ticks properly

问题描述

我有一个数据结构如

[{ name: "a", value: 5000},
{ name: "b", value: 6000},
{ name: "c", value: 7000},
{ name: "d", value: 4000}]

我尝试使用名称和值列使用两个不同的yaxis组件绘制yaxis。然而，看起来值yaxis缺少最后一个值（我得到4tick的名称yaxis标签和3个ticks为值yaxis标签）。请参阅以下小提示：

I try to draw a yaxis using the name and the value column using two different yaxis components. However, it appears that the value yaxis is missing one of the the last value (I get 4 ticks for the "name" yaxis labels and 3 ticks for the "value" yaxis labels). See the following fiddle:

http：// jsfiddle.net/namit101/AmHhg/73/

推荐答案

它不会绘制3个ticks，正如你所说。轴分量使用插值。组件按预期工作，你只是没有使用它。您应该在栏的顶部有单独的标签。尝试更改值如下： http://jsfiddle.net/AmHhg/81/

It does not draw 3 ticks, as you say. Axis component uses interpolation. The component works as expected, you are just not using it right. You should have individual labels on top of bars. Try changing the values like in this fiddle: http://jsfiddle.net/AmHhg/81/

由于轴分量在值之间插值，如果你有相同的值两次（条2和3），它只有一次显示是有意义的...

Since the axis component interpolates between values, if you have the same value twice (bars 2 and 3) it makes sense it's displayed only once...

在第一种情况（第一栏）中，栏会改变它的值，所以当我们有相同的值时，我们实际上看不到它...

In the first case (first bar) the bar is changing it's value so we don't actually see it when we have the same value...

有关axis的详情，请访问： https://github.com/mbostock / d3 / wiki / SVG-Axes 。
还要尝试看看Bob Monteverde的NVD3轴组件。

Read more about axis here: https://github.com/mbostock/d3/wiki/SVG-Axes. Also try to look at Bob Monteverde's NVD3 axis components.

要解决这个问题：如果你实际上不想使用轴而是标签，只需添加标签在每个条的顶部，而不是像Mike Bostock和Scott Murray（alignedleft）的条形教程一样自动显示。

To fix this: if you do not actually want to use axis but rather labels, just add labels on top of each bar instead of having them displayed automatically like in the bar tutorials from Mike Bostock and Scott Murray (alignedleft).

这篇关于d3.js yaxis不能正确绘制所有的tick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！