d3 library - как установить значения легенды

Question

Я пытаюсь понять, как легенда работает с библиотекой d3.

Вот пример того, что я хочу сделать:

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

Я хочу, чтобы иметь возможность исправить легенду, например, если значение:

между 0 -> 20 = отображения зеленого цвета

между 20 -> 50 = дисплей розового цвета

между 50 -> 100 = дисплеем серого цвета

Мои значения верны, это просто, что легенда изменяется в соответствии с моими значениями.

Иногда это может быть:

между 0 -> 2 = зеленый

между 20 -> 6 = розовый

между 50 -> 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 Посмотреть