javascript - 向使用 d3.svg.axis 的图表添加规则

Question

我使用的折线图本质上是 http://bl.ocks.org/3883245 处代码的副本。我想向图表添加水平规则，但是当我尝试通过 yAxis.tickValues() 访问计算的刻度值时，我只得到空响应。我的做法正确吗？

Answer 1

tickValues 用于设置自定义的、外部确定的刻度位置。因此，如果您让轴选择值，则此属性将正确为 null。

添加网格线最简单的方法实际上是添加另一个轴!在示例中，您直接链接到以下几行:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

您可以添加以下内容来附加网格:

svg.append("g").attr("class", "xaxisgrid").call( xAxis.tickFormat("").tickSize(450) );

svg.select("g.xaxisgrid").selectAll(".tick")
    .style('stroke', "#000")
    .style('opacity', 0.4)
    .filter(function(d, i){ return d3.select(this).classed('minor');} )
        .style('opacity', 0.1);

svg.select("g.xaxisgrid .domain").style('fill', 'none');

代码有点粗糙，但应该可以帮助您入门。基本上我稍微修改了轴生成函数(xAxis)以仅生成刻度，然后我使刻度非常长。