DC.js - Zusammengesetztes Diagramm

Das zusammengesetzte Diagramm ist ein spezieller Diagrammtyp, der von DC.js bereitgestellt wird. Es bietet die Möglichkeit, mehrere Diagramme im selben Koordinatenraster zu rendern. Das zusammengesetzte Diagramm ermöglicht erweiterte Optionen für die Diagrammvisualisierung mit einer minimalen Codezeile.

Zusammengesetzte Diagrammmethoden

Bevor wir mit dem Zeichnen eines zusammengesetzten Diagramms fortfahren, müssen wir das verstehen dc.compositeChartKlasse und ihre Methoden. Das dc.compositeChart verwendet Mixins, um die Grundfunktionen zum Zeichnen eines Diagramms zu erhalten. Die vom dc.compositeChart verwendeten Mixins sind wie folgt:

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

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

Das dc.compositeChart ruft alle Methoden der oben angegebenen Mixins ab. Es hat eine eigene Methode zum Zeichnen des zusammengesetzten Diagramms, die im Folgenden erläutert wird:

komponieren ([subChartArray])

Legen Sie die Sammlung von Diagrammen fest, die im selben Koordinatengitterdiagramm gerendert werden sollen.

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

Kinder()

Ruft alle Diagramme ab, die im selben Koordinatenraster erstellt wurden.

childOptions ([childOptions])

Ruft die Diagrammoptionen für alle untergeordneten Diagramme ab, die im selben Koordinatenraster erstellt wurden, oder legt diese fest.

shareTitle ([shareTitle])

Ruft den gemeinsamen Titel des Diagramms ab oder legt diesen fest. Wenn festgelegt, wird es für alle untergeordneten Diagramme freigegeben, die im selben Koordinatenraster erstellt wurden.

shareColors ([shareColors])

Ähnlich wie die Funktion shareTitle (), außer dass die Farben anstelle des Titels verwendet werden.

rightY ([yScale])

Ruft die y-Skala für die rechte Achse des zusammengesetzten Diagramms ab oder legt diese fest.

rightYAxis ([rightYAxis])

Ruft die rechte y-Achse des zusammengesetzten Diagramms ab oder legt diese fest.

rightYAxisLabel (rightYAxisLabel [??])

Ruft die Beschriftung der rechten y-Achse ab oder legt diese fest.

alignYAxes ([alignYAxes])

Ruft die Ausrichtung zwischen der linken und rechten y-Achse ab oder legt diese fest.

useRightAxisGridLines ([useRightAxisGridLines])

Ruft ab oder legt fest, ob Gitterlinien von der rechten y-Achse des zusammengesetzten Diagramms gezeichnet werden sollen. Das Standardverhalten ist das Zeichnen von der linken y-Achse.

Zeichnen Sie ein zusammengesetztes Diagramm

Zeichnen wir mit DC.js ein zusammengesetztes Diagramm. Um dies zu tun, sollten wir die folgenden Schritte ausführen -

Schritt 1: Definieren Sie eine Variable

Definieren wir eine Diagrammvariable wie unten gezeigt -

var chart = dc.compositeChart('#compoiste');

Hier wird die Funktion dc.compositeChart einem Container mit zugeordnet composite als seine ID.

Schritt 2: Lesen Sie die Daten

Daten aus der Datei people.csv lesen -

d3.csv("data/people.csv", function(errors, people) {
    
}

Wenn keine Daten vorhanden sind, wird ein Fehler zurückgegeben. Wir werden dieselbe people.csv-Datei verwenden. Die Beispieldatendatei lautet 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: Ordnen Sie die Daten zu

Ordnen Sie nun die Daten wie unten gezeigt zu -

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

Hier haben wir das Alter aus den Crossfilter-Daten zugewiesen. Das ~~ ist ein doppelter NICHT bitweiser Operator. Es wird als schnellerer Ersatz verwendet.

Wenden Sie nun die Dimension Alter an und gruppieren Sie die Geschlechtsdaten mithilfe der unten angegebenen Codierung.

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

Schritt 4: Erstellen Sie ein Diagramm

Generieren Sie nun ein zusammengesetztes Diagramm mit der unten angegebenen Codierung -

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

Hier,

Die Diagrammbreite beträgt 768 und die Höhe 480.
Mit der Funktion d3.scale.linear wird eine neue lineare Skala mit dem angegebenen Domänenbereich erstellt [15, 70].
Wir weisen eine Beschriftung der x-Achse als Alter und eine Beschriftung der y-Achse als Anzahl zu.
Rendern Sie als Nächstes horizontale Gitterlinien als wahr.
Stellen Sie den Wert für die Liniendiagrammfarben zusammen - Rot für das männliche Geschlecht und Blau für die Frau.
Schließlich setzen wir den Pinsel-Wert auf false und rendern das Diagramm.

Schritt 5: Arbeitsbeispiel

Der vollständige Code lautet wie folgt. Erstellen Sie eine Webseitecomposite.html und fügen Sie die folgenden Änderungen hinzu.

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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 = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

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