数値の比較に基づいた色分けされた棒グラフd3

Question

グループ化された棒グラフを構築しています。チャートでは、ミズーリ州の数値が全国平均の数値よりも大きいため、棒グラフの1つのグループを異なる色にしたいと考えています。しかし、私のelse ifステートメントは、fill関数のためにはうまくいきません。数字の比較に基づいてチャートを色分けするにはどうすればいいですか？前もって感謝します！！ここで

は私のコードここ

<svg id="bodychart" width="900" height="500" style="display: block; margin: auto"></svg> 

<script> 

var svg = d3.select("#bodychart"), 
    margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top +")"); //Not quite understand (??) 

var x0 = d3.scaleBand() 
    .rangeRound([0, width]) 
    .paddingInner(0.1); 

var x1 = d3.scaleBand() 
    .padding(0.05); 

var y = d3.scaleLinear() 
    .rangeRound([height, 0]); 

var z = d3.scaleOrdinal() 
    .range(["#F63014", "#ABABAB"]); 

var tooltip = d3.select("body").append("div").attr("class", "toolTip"); 

d3.csv("number.csv", function(d, i, columns){ 
    for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = + d[columns[i]]; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    var keys = data.columns.slice(1); 

    x0.domain(data.map(function(d) {return d.BodyParts; })); 
    x1.domain(keys).rangeRound([0, x0.bandwidth()]); 
    y.domain([0, d3.max(data, function(d) {return d3.max(keys, function(key) {return d[key]; }); })]); 

    g.append("g") 
    .selectAll("g") 
    .data(data) 
    .enter() 
    .append("g") 
     .attr("transform", function(d) {return "translate(" + x0(d.BodyParts) + ",0)"; }) 
    .selectAll("rect") 
    .data(function(d) {return keys.map(function(key){return {key: key, value: d[key]}; }); }) 
    .enter() 
    .append("rect") 
     .attr("x", function(d) {return x1(d.key);}) 
     .attr("y", function(d) {return y(d.value);}) 
     .attr("width", x1.bandwidth()) 
     .attr("height", function(d){return height - y(d.value);}) 
     .attr("fill", function(d, i) { 

     if (d.value['Missouri'] > d.value['National_Average']) { 
      return z(d.key); 
     } else (d.value['Missouri'] < d.value['National_Average']) { 
      return "yellow"; 
     } 
     }) 
     .on("mousemove", function(d){ 
     tooltip 
      .style("left", d3.event.pageX - 50 + "px") 
      .style("top", d3.event.pageY - 70 + "px") 
      .style("display", "inline-block") 

      .html("<span style='font-weight: bold'>"+ (d.key) +"</span>" + ":" + "<br>" + "$" + d3.format(",.0f")(d.value)); 

    }) 
     .on("mouseout", function(d){ tooltip.style("display", "none");}); 

    g.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x0)); 

    g.append("g") 
     .attr("class", "axis") 
     .call(d3.axisLeft(y).ticks(10, ",.0f")) 
     .append("text") 
     .attr("x", -32) 
     .attr("y", y(y.ticks().pop()) + 0.5) 
     .attr("dy", "-3em") 
     .attr("fill", "#000") 
     .attr("font-weight", "bold") 
     .attr("text-anchor", "start") 
     .text("Dollars"); 

}); 

である私のcsvファイルである：各ペアのための完全なデータは、親の選択にあるので、あなたはそれを取得する必要が

BodyParts,Missouri,National_Average 
    Arm,115100,169878 
    Leg,102697,153221 
    Hand,86821,144930 
    Thumb,29767,42432 
    Index Finger,22325,24474 
    Middle Finger,17364,20996 
    Ring Finger,17364,14660 
    Pinky,10915,11343 
    Foot,74418,91779 
    Big Toe,19845,23436 
    Eye,69457,96700 
    Ear,24310,38050 
    Testicle,0,27678 

Answer 1

比較を行う前に各バーの塗りを設定するとき

はこのように、これは...

var parentData = d3.select(this.parentNode).data()[0]; 

...それは、 Missouriと National_Averageで、ペアのデータを格納します。

次に、そのオブジェクトを使用して条件付きでバーを塗りつぶします。これはそれを行うための方法である（短い通り、もちろんであるが、私は、この詳細なスニペットはあなたのためのより多くの教訓的であると信じて）：あなたは、いくつか持っているhttp://plnkr.co/edit/dfjKFUpuiJvLs6wWkO99?p=preview