基於數字比較的顏色分組條形圖d3

Question

我正在構建分組條形圖。在圖表中，我想以不同的方式對一組條形圖進行着色，因爲它的密蘇里州的數字大於全國平均數字。但是，我的其他if語句對於填充函數不起作用。任何人都可以告訴我，根據數字的比較，我應該怎麼做不同顏色的圖表？提前致謝！！

這裏是我的代碼

<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。

然後，使用該對象有條件地填充條。這是一個辦法做到這一點（有辦法縮短，當然，但我相信這冗長的代碼段爲你們更是說教）：

.attr("fill", function(d, i) { 
    var parentData = d3.select(this.parentNode).data()[0]; 
    if (d.key === "Missouri") { 
     if (parentData.Missouri > parentData.National_Average) { 
      return "green" 
     } else { 
      return "red" 
     } 
    } else { 
     if (parentData.Missouri < parentData.National_Average) { 
      return "green" 
     } else { 
      return "red" 
     } 
    } 
}) 

下面是一個plunker顯示它：http://plnkr.co/edit/dfjKFUpuiJvLs6wWkO99?p=preview