D3.js - Skalen-API

D3.js bietet Skalierungsfunktionen zum Durchführen von Datentransformationen. Diese Funktionen ordnen eine Eingabedomäne einem Ausgabebereich zu.

API konfigurieren

Wir können die API direkt mit dem folgenden Skript konfigurieren.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

Skaliert API-Methoden

D3 bietet die folgenden wichtigen Skalierungsmethoden für verschiedene Diagrammtypen. Lassen Sie uns dann im Detail verstehen.

d3.scaleLinear() - Erstellt eine kontinuierliche lineare Skala, in die Daten (Domänen) dem angegebenen Ausgabebereich zugeordnet werden können.
d3.scaleIdentity() - Erstellen Sie eine lineare Skala, bei der die Eingabedaten mit den Ausgaben übereinstimmen.
d3.scaleTime() - Erstellen Sie eine lineare Skala, in der sich die Eingabedaten in den Daten und die Ausgabe in Zahlen befinden.
d3.scaleLog() - Konstruieren Sie eine logarithmische Skala.
d3.scaleSqrt() - Konstruieren Sie eine Quadratwurzelskala.
d3.scalePow() - Konstruieren Sie eine Exponentialskala.
d3.scaleSequential() - Erstellen Sie eine sequentielle Skala, bei der der Ausgabebereich durch die Interpolatorfunktion festgelegt wird.
d3.scaleQuantize() - Erstellen Sie eine Quantisierungsskala mit diskretem Ausgabebereich.
d3.scaleQuantile() - Erstellen Sie eine Quantilskala, in der die eingegebenen Probendaten dem diskreten Ausgabebereich zugeordnet sind.
d3.scaleThreshold() - Erstellen Sie eine Skala, in der die beliebigen Eingabedaten dem diskreten Ausgabebereich zugeordnet sind.
d3.scaleBand() - Bandskalen sind wie Ordnungsskalen, außer dass der Ausgabebereich kontinuierlich und numerisch ist.
d3.scalePoint() - Konstruieren Sie eine Punkteskala.
d3.scaleOrdinal() - Erstellen Sie eine Ordnungsskala, in der die Eingabedaten Alphabete enthalten und dem diskreten numerischen Ausgabebereich zugeordnet sind.

Bevor wir ein Arbeitsbeispiel machen, lassen Sie uns zunächst die folgenden zwei Begriffe verstehen:

Domain - Die Domain bezeichnet Minimal- und Maximalwerte Ihrer Eingabedaten.
Range - Der Bereich ist der Ausgabebereich, dem die Eingabewerte zugeordnet werden sollen ...

Arbeitsbeispiel

Lassen Sie uns in diesem Beispiel die Funktion d3.scaleLinear ausführen. Dazu müssen Sie die folgenden Schritte ausführen:

Step 1 - - Define variables - Definieren Sie SVG-Variablen und -Daten mithilfe der folgenden Codierung.

var data = [100, 200, 300, 400, 800, 0]
   var width = 500, 
      barHeight = 20, 
      margin = 1;

Step 2 - - Create linear scale - Verwenden Sie den folgenden Code, um eine lineare Skala zu erstellen.

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

Hier können wir für den minimalen und maximalen Wert für unsere Domain manuell den integrierten Wert verwenden d3.min() und d3.max() Funktionen, die minimale bzw. maximale Werte von unserem Datenarray zurückgeben.

Step 3 - - Append SVG attributes - Hängen Sie die SVG-Elemente mit dem unten angegebenen Code an.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Step 4 - - Apply transformation - Wenden Sie die Transformation mit dem folgenden Code an.

var g = svg.selectAll("g")
   .data(data).enter().append("g")
   .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
});

Step 5 - - Append rect elements - Hängen Sie die Rect-Elemente wie unten gezeigt an die Skalierung an.

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

Step 6 - - Display data - Zeigen Sie nun die Daten mit der unten angegebenen Codierung an.

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

Step 7 - - Working Example - Erstellen wir nun ein Balkendiagramm mit der Funktion d3.scaleLinear () wie folgt.

Erstellen Sie eine Webseite "scale.html" und fügen Sie die folgenden Änderungen hinzu.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;
         
         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);
         
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
    
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

Der obige Code zeigt das folgende Ergebnis im Browser an.