d3.js中图例比例的百分比

Question

我正在尝试在图例文字中显示百分比而不是值。 我尝试使用formats.percentage，但它没有给出所需的结果，事实上，没有显示文字。

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

legend.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); })   -- this was original
    // replaced with below piece
    .text(function(d) {
        var r = colors.invertExtent(d);
        return formats.percent(r[0]);
    }
    .attr("x", function(d, i) { return legendElementWidth * i; })
    .attr("y", height + gridSize);

legend.exit().remove();