Création de graphiques de ligne et de barres simples à l'aide de D3.J

Cet article s'appuie sur un tutoriel précédent sur les graphiques de bulles à l'aide de D3.js, une bibliothèque JavaScript pour la visualisation des données. Nous explorerons maintenant la création de graphiques de ligne et de bar avec D3.JS, en tirant parti de HTML, SVG et CSS. La familiarité avec l'article précédent est recommandée. Les principaux plats comprennent la compréhension du rôle de D3.js dans les visualisations interactives, la mécanique de la création de graphiques de lignes (échelles, axes, générateurs de lignes), construction de graphiques à barres (échelles ordinales, rectangles) et amélioration de l'expérience utilisateur par interactivité (Info-tools, gestionnaires d'événements, transitions ). Les options de personnalisation, telles que la mise à l'échelle et le style des axes, sont également mis en évidence.

Tableaux de ligne: un guide étape par étape

Notre exemple utilise l'ensemble de données suivant:

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}];

et un élément SVG:

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

Nous définissons les échelles, les axes et les marges:

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);

Une fonction de générateur de ligne est ensuite créée:

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

Enfin, la ligne est annexée au SVG:

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

graphiques à barres: Building on the Foundation

Pour les graphiques à barres, nous réutilisons la création de l'axe mais modifions les échelles et ajoutons des rectangles:

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();

Cet exemple amélioré inclut les gestionnaires d'événements MouseOver et Mouseout pour l'interactivité. Des techniques de personnalisation et avancées supplémentaires sont possibles avec D3.JS, permettant des visualisations de données très adaptées et dynamiques. La section FAQ fournie offre des conseils supplémentaires sur l'ajout d'étiquettes, d'infiltraux, de réactivité, d'animations, de tri, de titres, de légendes et de gestion des données manquantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!