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行.这是JSFiddle的一个例子.

此外,在该脚本的末尾,我尝试添加y轴,但它只是水平显示 - 如何让它垂直显示？在我看过的所有例子中,这似乎都是正常的.

Answer 1

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

如果要显式设置值,则需要实例化a d3.svg.axis()并使用axis.tickValues()(就像你进一步向下).

关于你的第二个问题.轴具有默认方向(您正在看到),用作水平X轴.您需要打电话.orient("left")或.orient("right")获得垂直轴.请注意,如果使用"向左"方向,则实际上不会看到轴,bc的数字将从SVG的左边缘开始运行并被裁剪.因此,一般来说,在SVG中添加一些填充并将所有图形移到其中是一个好主意.如果使用"右"方向,您将看到数字,但通常在这种情况下,您将轴转换为图形的右侧.