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

我有一个简单的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，我会得到2行。如果我将其更改为5，那么我仍然会得到5行。 Here's an example on JSFiddle。

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

来源

2013-02-25 Phil Gyford

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")以获取垂直轴。请注意，如果使用“向左”方向，实际上看不到一个坐标轴，则其编号将从SVG的左边缘运行并被裁剪。所以一般来说，在SVG中添加一些填充并将所有图形转移到SVG中是个不错的主意。如果您使用“正确”方向，您将看到数字，但通常在这种情况下，您需要将轴线翻译到图表的右侧。

来源

2013-02-25 18:22:03 meetamit

非常好，谢谢 - 稍微摆弄一下，阅读[这个例子]（http://www.d3noob.org/2013/01/adding-grid-lines-to-d3js-graph.html），我知道了[所有工作都很好]（http://jsfiddle.net/philgyford/TVNuZ/6/）。 – 2013-02-25 21:22:18

不错，它看起来不错。尽管我注意到你的'.axis' CSS风格已经适用于它。因此，轴中的所有内容（包括刻度标签“font”）都会中断。它给文本一个独特的外观，但我不确定这是故意的。 – meetamit 2013-02-25 23:00:30

哦，是的 - 我想知道为什么这看起来很奇怪，但没有调查。 [立即修复]（http://jsfiddle.net/philgyford/TVNuZ/7/），谢谢。 – 2013-02-26 10:08:38

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

回答

相关问题