將規則添加到使用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）以僅生成刻度，然后我使刻度非常長。