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!