3

我有一个简单的 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 轴，但它只水平显示 - 我如何让它垂直显示？这似乎在我见过的所有例子中都有效。

4

1 回答 1

5

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

如果要显式设置值，则需要实例化 ad3.svg.axis()并使用axis.tickValues()（就像您在下面所做的那样）。

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

于 2013-02-25T18:22:03.707 回答