Prozentsatz in der Legendenskalierung in d3.js

Ich versuche, Prozentwerte anstelle von Werten im Legendentext anzuzeigen. Ich versuchte mit formats.percentage, aber es gibt nicht das gewünschte Ergebnis, tatsächlich gibt es keine Anzeige von Text.Prozentsatz in der Legendenskalierung in d3.js

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();

Quelle

2016-04-07 Cini09

Sie Werkzeuge d3 Formatierung verwenden: https://github.com/mbostock/d3/wiki/Formatting

, es zu benutzen Sie Folgendes tun:

d3.format(' insert format parameter here ')(insert value here);

statt formats.percent (r [0]);

In Ihrem Fall wäre es:

.text(d3.format('%')(r[0]));

bewusst sein, obwohl, dass es nicht nur das Hinzufügen eines ‚%‘ nach dem Wert, es% „mit 100 und Suffix multiplizieren‚‘“ wie in dem angegebenen Dok.

Unten ist ein Beispiel dafür, wie es mit Dummy-Nummern zu verwenden:

var r = [ 0.4, 80]; //Whatever values you have in r 
 

 
var s = d3.select('body') 
 
    .append('svg') 
 
    .attr('width', 500) 
 
    .attr('height', 500); 
 

 
s.append('text') 
 
    .text(d3.format('%')(r[0])) //Thats where you apply the format : 0.4 -> 40% 
 
    .attr('x', 10) 
 
    .attr('y', 20); 
 

 
s.append('text') 
 
    .text(d3.format('%')(r[1])) 
 
    .attr('x', 10) 
 
    .attr('y', 40);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<body> 
 
</body>

Quelle

2016-04-11 08:11:52 agatheblues

perfekt. Ich habe die Ausgabe in Prozent erhalten. Vielen Dank – Cini09

Prozentsatz in der Legendenskalierung in d3.js

Antwort

Verwandte Themen