Erstellen einfacher Zeilen- und Balkendiagramme mit D3.Js

Dieser Artikel baut auf einem früheren Tutorial über Blasendiagramme mit D3.JS, einer JavaScript -Bibliothek zur Datenvisualisierung auf. Wir werden jetzt das Erstellen von Zeilen- und Balkendiagrammen mit D3.JS erforschen und HTML, SVG und CSS nutzen. Die Vertrautheit mit dem vorherigen Artikel wird empfohlen. Zu den wichtigsten Imbissbuden gehört das Verständnis der Rolle von D3.JS bei interaktiven Visualisierungen, der Mechanik der Leitungsdiagrammerstellung (Skalen, Achsen, Liniengeneratoren), Stabdiagrammkonstruktion (Ordnungsskalen, Rechtecke) und Verbesserung der Benutzererfahrung durch Interaktivität (Tooltips, Ereignishandler, Übergänge ). Anpassungsoptionen wie Achsenskalierung und Styling werden ebenfalls hervorgehoben.

Zeilendiagramme: Eine Schritt-für-Schritt-Anleitung

Unser Beispiel verwendet den folgenden Datensatz:

var lineData = [{x: 1, y: 5}, {x: 20, y: 20}, {x: 40, y: 10}, {x: 60, y: 40}, {x: 80, y: 5}, {x: 100, y: 60}];

und ein SVG -Element:

<svg id="visualisation" width="1000" height="500"></svg>

Wir definieren Skalen, Achsen und Ränder:

var vis = d3.select('#visualisation'),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {top: 20, right: 20, bottom: 20, left: 50},
    xRange = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(lineData, function(d) { return d.x; }), d3.max(lineData, function(d) { return d.x; })]),
    yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) { return d.y; }), d3.max(lineData, function(d) { return d.y; })]),
    xAxis = d3.svg.axis().scale(xRange).tickSize(5).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(yRange).tickSize(5).orient('left').tickSubdivide(true);

vis.append('svg:g').attr('class', 'x axis').attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')').call(xAxis);
vis.append('svg:g').attr('class', 'y axis').attr('transform', 'translate(' + (MARGINS.left) + ',0)').call(yAxis);

Eine Zeilengeneratorfunktion wird dann erstellt:

var lineFunc = d3.svg.line()
  .x(function(d) { return xRange(d.x); })
  .y(function(d) { return yRange(d.y); })
  .interpolate('linear');

Schließlich ist die Zeile an SVG angehängt:

vis.append('svg:path')
  .attr('d', lineFunc(lineData))
  .attr('stroke', 'blue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

Balkendiagramme: Aufbau auf der Grundlage

Für Balkendiagramme verwenden wir die Erstellung der Achsen wieder, ändern jedoch die Skalen und fügen Rechtecke hinzu:

function InitChart() {
  // ... (barData remains the same as lineData, for simplicity) ...
  var xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function(d) { return d.x; }));
  var yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, d3.max(barData, function(d) { return d.y; })]);
  // ... (xAxis and yAxis remain the same) ...

  vis.selectAll('rect')
    .data(barData)
    .enter()
    .append('rect')
    .attr('x', function(d) { return xRange(d.x); })
    .attr('y', function(d) { return yRange(d.y); })
    .attr('width', xRange.rangeBand())
    .attr('height', function(d) { return ((HEIGHT - MARGINS.bottom) - yRange(d.y)); })
    .attr('fill', 'grey')
    .on('mouseover', function(d) { d3.select(this).attr('fill', 'blue'); })
    .on('mouseout', function(d) { d3.select(this).attr('fill', 'grey'); });
}

InitChart();

Dieses erweiterte Beispiel umfasst Mausover- und Mausout -Event -Handler für die Interaktivität. Weitere Anpassungen und fortschrittliche Techniken sind mit D3.Js möglich, was hochgeschnittene und dynamische Datenvisualisierungen ermöglicht. Der Abschnitt "FAQs" für FAQs bietet weitere Anleitungen zum Hinzufügen von Etiketten, Tooltips, Reaktionsfähigkeit, Animationen, Sortierungen, Titeln, Legenden und Handhabung fehlender Daten.

Das obige ist der detaillierte Inhalt vonErstellen einfacher Zeilen- und Balkendiagramme mit D3.Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!