D3.js d3js：图例的最大值

下面的图例代码工作正常，但在最后一个矩形结束时不显示最大值。最大值总是36，所以我不介意硬编码，但不知道怎么做

data

是一个介于0和36之间的整数值数组，

data

数组被送入

eye\u 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);
          }

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

---

非常感谢任何帮助

代码在我看来没问题。也许最后一个文本元素被切断了？@Larskothoff不，我用web检查器检查了页面的元素，最大值元素根本不存在。代码将值显示在图例矩形的右侧，由于最后一个矩形之后没有矩形，因此无法显示最大值。请发布完整的示例，好吗？@Larskothoff我已编辑了问题中的代码，请查看，非常感谢您的帮助。您可能只需要

.domain（）

用于此。