D3：x軸の値に応じてy軸の目盛りにクラスを追加する

Question

私はグラフ上で作業しています.d3 libで構築しています。

グラフはとてもシンプルなので、y軸上のユーロとx軸上のマネー、私は時間の経過とともに銀行口座の進化を示すことができます。

私はカントー私はこのような何かを持っているx軸を描き、その月のアカウントで利用できる対応する量に応じて、月のラベルにいくつかのスタイルを追加したい：

（D3データは、すべてのデータが含まれています効果的に軸を作成しますが、今、私はそれぞれ「ゼロ」、「最大」またはものは何でものように、スタイリングのためのいくつかのクラスをカチカチに広告したいことは

d3Data.xScale = d3.scale.ordinal().domain(
    d3Data.dateStates.map(function(dateState) { 
     return dateState.xValue 
    }) 
); 

xAxis = d3.svg.axis().scale(d3Data.xScale).orient("bottom") 

d3Data.chart.append("g").call(xAxis) 

）グラフを描画するために必要。

私の最初のアプローチは、すべてのダニを選択して、このような何かやっていた。

d3Data.chart.selectAll(".xAxisItemClass") 
    .attr('class', function(data, index) { 
    if (d3Data.months[index].value === 0) 
     return 'zero' 
    }); 

をしかし、D3データはattr()呼び出しに2番目のパラメータとして渡された匿名関数内に存在しません。私はd3のような騒ぎですので、おそらく私は何かが不足しています。なぜなら、このような簡単なことは簡単にできるからです。

なぜ私はD3dataにアクセスできませんか？これどうやってするの？その配列は、匿名関数に表示されているので、事前に

おかげで:)

Answer 1

あなたは匿名関数外で定義された配列に基づいて、あなたのダニにクラスを追加することができます：それは外側のスコープで宣言されました。

これは基本的な例です：dataという配列を使用していますが、値が0（クラス「ゼロ」、1月）と値が11の2つのティックを設定しています（クラス "eleven"、March）。軸を調べると、あなたが表示されます。見やすくするために、私は.zeroを赤に、.elevenを緑色に設定しました。

var width = 550, height = 200; 
 

 
var data = [{month: "Jan", value: 0}, 
 
{month: "Feb", value: 30}, 
 
{month: "Mar", value: 11}, 
 
{month: "Apr", value: 60}, 
 
{month: "May", value: 20}, 
 
{month: "Jun", value: 88} 
 
]; 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", width) 
 
\t .attr("height", height); 
 
\t 
 
var xScale = d3.scale.ordinal() 
 
    .domain(data.map(function(d){ return d.month})) 
 
    .rangeBands([0, width*0.95]) 
 
\t 
 
var xAxis = d3.svg.axis().scale(xScale) 
 
\t .orient("bottom"); 
 

 
svg.append("g") 
 
\t .attr("transform", "translate(10,100)") 
 
\t .attr("class", "x axis") 
 
\t .call(xAxis); 
 
\t 
 
var ticks = d3.selectAll(".tick text"); 
 

 
ticks.attr("class", function(d,i){ 
 
if(data[i].value == 11){ return "eleven"} 
 
else if(data[i].value == 0){ return "zero"} 
 
});

.axis path, .axis line { 
 
fill: none; 
 
stroke: #4e5a64; 
 
shape-rendering: crispEdges; 
 
} 
 

 
.zero{ 
 
fill: red 
 
} 
 

 
.eleven{ 
 
fill:green 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>