Variable Präzision in d3.format

Ich bin mit d3.format("s") mit d3.svg.Achse.tickFormat hübsch format der hilfsstrichbeschriftungen mit SI-Einheit (aus dem Internationalen System der Einheiten). Es funktioniert wunderbar für den größten Teil, außer für gewisse Werte, die in einen Rundungsfehler und bringen Sie eine Tonne von Dezimalstellen (1400, zum Beispiel als 1400 * 0.001 = 1.4000000000000001).

Dies zu umgehen, kann ich angeben, a Präzision, wie d3.format(".2s"), aber diese Kräfte 2 signifikanten stellen in Fällen, in denen 1 wäre besser. Zum Beispiel, wenn ich Zecken [5000, 10000, 15000] ich würde jetzt sehen, [5.0 k, 10k, 15k]. Ursprünglich, wenn ich es nicht angeben Präzision auf alles, was ich habe [5k, 10k, 15k].

Frage ich mich, ob es möglich ist, geben Sie eine maximale Präzision, so dass es nur angewendet werden, wenn die Anzahl der signifikanten Ziffern über die Anzahl angegeben? So 5000 wäre 5k und nicht 5.0 k.

InformationsquelleAutor Scott Cameron | 2012-04-25
  1. 2

    Können Sie dies tun, indem Sie eine if/else-Anweisung in eine anonyme Funktion, wo würden Sie die Ausgabe der text-string. Innerhalb dieser if/else, als Sie befriedigen kann jedem Zustand, die Sie möchten, und erstellen Sie eine Funktion, die analysiert, Ihr Wert. Hier ist ein Beispiel:

    var w = 30, h = 300;
var data = [
  {'point':1, 'value':100.005},
  {'point':2, 'value':20.010},
  {'point':3, 'value':1000},
  {'point':4, 'value':5000.099},
  {'point':5, 'value':6000.934},
  {'point':6, 'value':9000.888},
  {'point':7, 'value':500.22},
  {'point':8, 'value':5.123},
  {'point':9, 'value':50.022},
  {'point':10, 'value':7000.999}
];
var chart = d3.select("body").append("svg")
  .attr('class', 'chart')
  .attr("width", w * data.length - 1)
  .attr("height", h);

chart.selectAll('text')
  .data(data)
.enter().append('text')
  .attr('x', function(d, i) { return x(i); })
  .attr('y', function(d) { return h - y(d.value); })
  .attr('dx', '0.75em')
  .attr('dy', '-0.3em')
  .attr('text-anchor', 'start')
  .text(function(d) { 
    if(d.value > 5000) {
      //Define your formatting function to return SI units
      var si = d3.format('s');
      return String(si(d.value));
    } else {
      //Otherwise round to the nearest integer
      return String(d3.round(d.value, 0));
    }
  });

    Hoffe, das hilft.

    • Danke für die Antwort. Leider bin ich mit dem d3.svg.Achse Helfer, so dass die Werte, die ich bin-Formatierung sind die tick-Werte, keine Daten Werte. Die Formatierung erfolgt intern als tick-Beschriftungen erzeugt werden. Ich konnte wickeln Sie die Funktion zurückgegeben, die von d3.format in meine eigene Funktion zum abfangen der Werte, sondern re-Parsen der Zeichenfolge zurückgegeben, die von der SI-Formatierer nicht das Gefühl zu reinigen. Ich Frage mich, es könnte etwas eingebaut das Formatierungsprogramm dies zu unterstützen, ohne Programmierung selbst.
    • Ahh Recht. Mein code ist für die Daten-labels, nicht die hilfsstrichbeschriftungen. Hoffe, ich habe nicht dazu führen Sie den falschen Weg eingeschlagen. Könnten Sie etwas ähnliches tun, aber mit der tick-Kennzeichnung-Funktionen (dh. übergeben Sie eine anonyme func Ihnen)?
    InformationsquelleAutor tatlar
  2. 2

    Während 1400 * .001 ist 1.4000000000000001, 1400 /1000 1,4; multipliziert eine ganze Zahl durch eine negative Potenz von zehn (wie .001) führen können Rundungsfehler, aber es scheint, dass wenn eine ganze Zahl durch eine Potenz von zehn (wie 1000) nicht. Oder zumindest, es ist weniger wahrscheinlich? Ich habe implementiert eine vorläufige fix in das Update-si-format-Runden die Filiale. Es ist streng rückwärts-inkompatible, aber da die d3.formatPrefix Funktion ist Undokumentiert, ich denke, es wäre sicher in der nächsten patch-release.

    Edit: Dieses Update wurde veröffentlicht in der version 2.9.2.

    • Interessant, dass diese beiden Operationen unterschiedliche Ergebnisse erzeugen. Ich hätte nicht gedacht, dass. Ich halte meine Augen offen für dieses Update im nächsten patch. Danke!
    InformationsquelleAutor mbostock
Schreibe einen Kommentar