将规则添加到使用d3.svg.axis的图表

Question

我使用的折线图基本上是http://bl.ocks.org/3883245上代码的副本。 我想在图表中添加水平规则，但是当我尝试通过yAxis.tickValues（）访问计算的tick值时，我只得到一个null响应。 我正确地谈到了吗？

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）以仅生成刻度，然后我使刻度非常长。