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

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

如果您想明确设置值，则需要实例化d3.svg.axis()并使用axis.tickValues()（就像您进一步向下）。

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

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

1 个答案: