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

Question

我使用的折线图基本上是http://bl.ocks.org/3883245的代码副本。我想为图表添加水平线，但是当我尝试通过yAxis.tickValues（）访问计算的刻度值时，我只会得到一个空响应。我是否正确地做了这件事？

Answer 1

tickValues用于设置自定义的，外部确定的滴答位置。所以，如果你让轴选择值，那么这个属性将正确为空。

添加网格线最简单的方法实际上是添加另一个轴！在这个例子中您链接紧随行：

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）来生成只有滴答，然后我使滴答真的很长。