javascript - d3.svg.axis を使用するチャートへのルールの追加

Question

基本的にhttp://bl.ocks.org/3883245のコードのコピーである折れ線グラフを使用しています。グラフに水平ルールを追加したいのですが、yAxis.tickValues() を介して計算された目盛り値にアクセスしようとすると、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)を少し変更して目盛りのみを生成し、目盛りを非常に長くしています。