如何在直方圖中對大於特定值的值進行着色

Question

我已經使用d3繪製了直方圖圖表，我已經使用json調用了值。我想要的顏色值大於某個值。

d3.json('stk.json', function (data) { 
      // just to have some space around items. 

     data = $.each(data.stackoverflow,function(i,stack){ 

       return {bucket: stack.x1, N: stack.y};  
      });  


     x.domain(data.map(function (d) { return d.x1; })); 
     y.domain([0, d3.max(data, function (d) { return d.y; })]); 

    svg.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate(0, "+(height-pad)+")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "axis") 
     .attr("transform", "translate("+(left_pad-pad)+", 0)") 
     .call(yAxis); 

    svg.selectAll('rect') 
     .data(data) 
     .enter() 
     .append('rect') 
     .attr('class', 'bar') 
     .attr('x', function (d) { return x(d.x1); }) 
     .attr('width', x.rangeBand()) 
     .attr('y', height-pad) 
     .transition() 
     .delay(function (d) { return d.x1*20; }) 
     .duration(800) 
     .attr('y', function (d) { return y(d.y); }) 
     .attr('height', function (d) { return height-pad - y(d.y); }) 
     .style("fill", function(d) { return color(d.y); }); 

}); 

有人可以幫助我。

Answer 1

你的答案就在這個留置權

.style("fill", function(d) { return color(d.y); });

只需要提供你的邏輯在功能方面並確保您返回適當的顏色，例如，讓我們看看所有的酒吧在5〜爲紅色，你只是做

.style("fill", function(d) { return d.y>5 ? '#ff0000' : color(d.y); });

希望這有助於