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

我有一个简单的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

我会得到两行。如果我将其更改为

5

，则仍会得到5行

---

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

d3.scale.linear（）的

ticks（）

方法的参数只是一个提示。该方法将其用作近似值，但它会选择“漂亮”的值。（见此处：）

如果要显式设置值，则需要实例化一个

d3.svg.axis（）

，并使用

axis.tickValues（）

（就像前面所做的那样）

---

关于你的第二个问题。轴有一个默认方向（您可以看到），用作水平X轴。您需要调用

.orient（“left”）

或

.orient（“right”）

来获取垂直轴。注意，如果使用“左”方向，实际上看不到轴，其编号将从SVG的左边缘偏移并被裁剪。因此，一般来说，在SVG中添加一些填充并移动其中的所有图形是一个好主意。如果你使用“右”方向，你会看到数字，但通常在这种情况下，你会将轴平移到图表的右侧。

太棒了，谢谢你-通过一点摆弄和阅读，我知道了。很好，看起来不错。不过我注意到你的

.axis

CSS样式应用了一个笔划。因此，轴内的所有东西——包括刻度标签的字体——都会得到一个笔划。它给文本一个独特的外观，但我不确定它是有意的。哦，是的-我想知道为什么看起来很奇怪，但没有调查，谢谢