d3js：图例的最大值

Question

传说中的代码工作正常，但不会显示最后一个矩形末尾的最大值。最大值总是36，所以我不介意硬编码，但不知道该怎么做。 data是一个介于0到36之间的整数值数组，data数组被送入eye_data[i].value。我无法提供实际数据，因为它是从数据库上传的，而单独的文件负责上传值。

//this is just an example of the eye_data format
    var eye_data = [
            { locus: "p1", coordinates: {x: "4", y: "1"}, value:"" },
            { locus: "p2", coordinates: {x: "5", y: "1"}, value:"" },
            { locus: "p3", coordinates: {x: "6", y: "1"}, value:"" },
            { locus: "p4", coordinates: {x: "7", y: "1"}, value:"" }];

      function heat_map_graph() {

              var colorScale = d3.scale.quantile()
                  .domain([0, buckets - 1, d3.max(data, function (d) { return parseInt(d); })])
                  .range(colors);

              var svg = d3.select("#punchcard").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 heatMap = svg.selectAll("g")
                  .data(eye_data)
                  .enter().append("rect")
                  .attr("x", function(d) { return (parseInt(d.coordinates.x) - 1) * gridSize; })
                  .attr("y", function(d) { return (parseInt(d.coordinates.y) - 1) * gridSize; })
                  .attr("cx", 4)
                  .attr("cy", 4)
                  .attr("class", "hour bordered")
                  .attr("width", gridSize)
                  .attr("height", gridSize)
                  .style("fill", colors[0])
              .style("stroke", "black");

              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 + 30)
                .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 + 30 + gridSize);
          }

最大值如何显示在最后一个图例的末尾？

任何帮助都非常感谢!!