d3庫 - 如何設置圖例值

Question

我想了解圖例如何與d3庫一起工作。

這裏是我想要做的一個例子：

http://bl.ocks.org/tjdecke/5558084

我希望能夠修復的傳說，例如，如果值是：

之間0 - > 20 =顯示綠色

之間20 -

之間50> 50 =顯示粉紅色 - > 100 =顯示灰色

我的數值是正確的，只是傳說根據我的價值觀而改變。

有時它可以是：

0之間 - 之間20> 2 =綠色

- 之間50> 6 =粉紅

- > 10 =灰

或者：

0 - > 10 =綠色

20 - > 15 =粉紅色

50 - > 75 =灰色

我需要一個修復圖例。

但我不知道在哪裏設置。

下面是代碼：

<div id="chart"></div> 

    <script type="text/javascript"> 
     var margin = { top: 50, right: 0, bottom: 100, left: 30 }, 
      width = 960 - margin.left - margin.right, 
      height = 430 - margin.top - margin.bottom, 
      gridSize = Math.floor(width/24), 
      legendElementWidth = gridSize*2, 
      buckets = 9, 
      colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"], // alternatively colorbrewer.YlGnBu[9] 
      days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], 
      times = ["1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p", "12p"]; 


     d3.tsv("data.tsv", 
     function(d) { 
      return { 
      day: +d.day, 
      hour: +d.hour, 
      value: +d.value 
      }; 
     }, 
     function(error, data) { 
      var colorScale = d3.scale.quantile() 
       .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })]) 
       .range(colors); 

      var svg = d3.select("#chart").append("svg") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

      var dayLabels = svg.selectAll(".dayLabel") 
       .data(days) 
       .enter().append("text") 
       .text(function (d) { return d; }) 
       .attr("x", 0) 
       .attr("y", function (d, i) { return i * gridSize; }) 
       .style("text-anchor", "end") 
       .attr("transform", "translate(-6," + gridSize/1.5 + ")") 
       .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); }); 

      var timeLabels = svg.selectAll(".timeLabel") 
       .data(times) 
       .enter().append("text") 
       .text(function(d) { return d; }) 
       .attr("x", function(d, i) { return i * gridSize; }) 
       .attr("y", 0) 
       .style("text-anchor", "middle") 
       .attr("transform", "translate(" + gridSize/2 + ", -6)") 
       .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); }); 

      var heatMap = svg.selectAll(".hour") 
       .data(data) 
       .enter().append("rect") 
       .attr("x", function(d) { return (d.hour - 1) * gridSize; }) 
       .attr("y", function(d) { return (d.day - 1) * gridSize; }) 
       .attr("rx", 4) 
       .attr("ry", 4) 
       .attr("class", "hour bordered") 
       .attr("width", gridSize) 
       .attr("height", gridSize) 
       .style("fill", colors[0]); 

      heatMap.transition().duration(1000) 
       .style("fill", function(d) { return colorScale(d.value); }); 

      heatMap.append("title").text(function(d) { return d.value; }); 

      var legend = svg.selectAll(".legend") 
       .data([0].concat(colorScale.quantiles()), function(d) { return d; }) 
       .enter().append("g") 
       .attr("class", "legend"); 

      legend.append("rect") 
      .attr("x", function(d, i) { return legendElementWidth * i; }) 
      .attr("y", height) 
      .attr("width", legendElementWidth) 
      .attr("height", gridSize/2) 
      .style("fill", function(d, i) { return colors[i]; }); 

      legend.append("text") 
      .attr("class", "mono") 
      .text(function(d) { return "≥ " + Math.round(d); }) 
      .attr("x", function(d, i) { return legendElementWidth * i; }) 
      .attr("y", height + gridSize); 
     }); 
    </script> 

謝謝您的幫助！

Answer 1

如果我正確地得到了您的問題，您需要d3.scale.threshold而不是d3.scale.quantile。

說，你需要的值下面的方式映射到顏色：

0 - < 3 - color[0] 
3 - < 10 - color[1] 
10 - < 30 - color[2] 
>= 30 - color[3] 

更新代碼的方式如下：

// init the scale 
var colorScale = d3.scale.threshold() 
    .domain([0, 3, 10, 30]) 
    .range([0].concat(colors)); 

使用這個規模以同樣的方式，你在使用它目前的圖表。 而對於傳奇使用的

colorScale.domain() 

代替

[0].concat(colorScale.quantiles() 

見demo