javascript - d3 条形图上的线条/刻度数错误

Question

我有一个简单的 d3 条形图，我正在尝试在背景中绘制水平线。

图表上的条形代表百分比，全高条形代表 100%。我想显示 4 个条，分别为 25%、50%、75% 和 100%。但是如果我这样做:

svg.selectAll('.rule')
    .data(y.ticks(4))
.enter().append('line')
    .attr('class', 'rule')
    .attr('x1', 0)
    .attr('x2', width)
    .attr('y1', y)
    .attr('y2', y);

然后 y.ticks(4) 显示 5 行。如果我将它更改为 3，我会得到 2 行。如果我将它更改为 5，那么我仍然得到 5 行。 Here's an example on JSFiddle .

此外，在该脚本的末尾，我尝试添加一个 y 轴，但它只能水平显示 - 如何让它垂直显示？这似乎适用于我见过的所有示例。

Answer 1

d3.scale.linear() 的ticks() 方法的参数只是一个提示。该方法使用它作为近似值，但它会选择“漂亮”的值。 (参见此处:https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_ticks)

如果你想明确地设置值，你需要实例化一个 d3.svg.axis() 并使用 axis.tickValues()(就像你做的更进一步下)。

关于您的第二个问题。该轴有一个默认方向(如您所见)，用作水平 X 轴。您需要调用 .orient("left") 或 .orient("right") 来获取垂直轴。请注意，如果您使用“左”方向，您实际上看不到轴，因为它的数字会超出 SVG 的左边缘并被裁剪。因此，通常向 SVG 添加一些填充并在其中移动所有图形是个好主意。如果您使用“右”方向，您会看到数字，但通常在这种情况下，您会将轴平移到图表的右侧。