DC.js - Liniendiagramm

Ein Liniendiagramm wird verwendet, um Informationen als eine Reihe von Datenpunkten anzuzeigen, die durch gerade Linien verbunden sind. Ein Datenpunkt repräsentiert zwei Werte, einen entlang der horizontalen Achse und einen entlang der vertikalen Achse. Beispielsweise kann die Beliebtheit von Lebensmitteln als Liniendiagramm so gezeichnet werden, dass das Lebensmittel entlang der x-Achse und seine Beliebtheit entlang der y-Achse dargestellt wird. In diesem Kapitel werden Liniendiagramme ausführlich erläutert.

Liniendiagrammmethoden

Bevor wir mit dem Zeichnen eines Liniendiagramms fortfahren, sollten wir das verstehen dc.lineChartKlasse und ihre Methoden. Das dc.lineChart verwendet Mixins, um die grundlegenden Funktionen zum Zeichnen eines Diagramms zu erhalten. Die von dc.lineChart verwendeten Mixins lauten wie folgt:

dc.stackMixin
dc.coordinateGridMixin

Das vollständige Klassendiagramm des dc.lineChart lautet wie folgt:

Das dc.lineChart ruft alle Methoden der oben angegebenen Mixins ab und verfügt über eigene Methoden zum Zeichnen des Liniendiagramms. Sie werden wie folgt erklärt.

dashStyle ([style])

Diese Methode wird verwendet, um den Strichstil für ein Liniendiagramm festzulegen.

dotRadius ([Radius])

Diese Methode wird verwendet, um den Radius (in PX) für Punkte abzurufen oder festzulegen, die auf den Datenpunkten angezeigt werden. Es ist wie folgt definiert:

chart.dotRadius = function (radius) {
   if (!arguments.length) {
      return radius;
   }
};

interpolieren ([i])

Diese Methode wird verwendet, um den Interpolator für eine Linie abzurufen oder einzustellen.

renderArea ([Bereich])

Diese Methode wird verwendet, um den Renderbereich abzurufen oder festzulegen.

renderDataPoints ([Optionen])

Diese Methode wird verwendet, um einzelne Punkte für jeden Datenpunkt zu rendern.

Spannung ([Spannung])

Diese Methode wird verwendet, um die Spannung für die gezeichneten Linien abzurufen oder einzustellen. Es liegt im Bereich von 0 bis 1.

xyTipsOn ([xyTipsOn])

Diese Methode wird verwendet, um das Mausverhalten eines einzelnen Datenpunkts zu ändern.

Zeichnen Sie ein Liniendiagramm

Zeichnen wir ein Liniendiagramm in DC. Dazu müssen wir die folgenden Schritte ausführen -

Schritt 1: Definieren Sie eine Variable

Definieren wir eine Variable wie unten gezeigt -

var chart = dc.lineChart('#line');

Hier wird die Funktion dc.linechart dem Container mit einem zugeordnet id line.

Schritt 2: Lesen Sie die Daten

Lesen Sie die Daten aus dem people.csv Datei -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Wenn wir denselben Datensatz people.csv verwendet haben, lautet die Beispieldatendatei wie folgt:

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

...............
................
................

Schritt 3: Erstellen Sie eine Altersdimension

Erstellen Sie nun eine Dimension für das Alter wie unten gezeigt -

var ageDimension = mycrossfilter.dimension(function(data) { 
    return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Hier haben wir das Alter aus den Crossfilter-Daten zugewiesen.

Das ~~ ist ein doppelter NICHT bitweiser Operator. Es wird als schnellerer Ersatz für die verwendetMath.floor() Funktion.

Gruppieren Sie es jetzt mit dem reduceCount() Funktion, die unten definiert ist -

var ageGroup = ageDimension.group().reduceCount();

Schritt 4: Erstellen Sie ein Diagramm

Erstellen Sie nun ein Liniendiagramm mit der unten angegebenen Codierung -

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Hier,

Die Diagrammbreite beträgt 800 und die Höhe 300.
Mit der Funktion d3.scale.linear wird eine neue lineare Skala mit dem angegebenen Domänenbereich erstellt [15, 70].
Als nächstes setzen wir die brushOn Wert auf falsch.
Wir weisen die Beschriftung der y-Achse als zu count und x-Achsenbeschriftung als age.
Gruppieren Sie abschließend das Alter mit ageGroup.

Schritt 5: Arbeitsbeispiel

Die vollständige Codeliste wird im folgenden Codeblock angezeigt. Erstellen Sie eine Webseiteline.html und fügen Sie die folgenden Änderungen hinzu.

<html>
   <head>
      <title>DC.js Line Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "line"></div>
      </div>

      <script language = "javascript">
         var chart = dc.lineChart('#line');

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

Fordern Sie jetzt den Browser an und wir sehen die folgende Antwort.