Visualisation de données avec D3.js et React

Combiner D3.js pour la puissance de visualisation et React pour la réactivité permet de créer des dashboards performants. Ce guide montre comment intégrer ces deux technologies avec des exemples concrets.

Pourquoi D3.js avec React ?

Complémentarité des technologies

Technologie	Points forts	Points faibles
D3.js	Puissance graphique, flexibilité	Gestion manuelle du DOM
React	Gestion d'état, composants réutilisables	Visualisation basique

Architecture recommandée

Structure de composants

src/
├── components/
│   ├── charts/
│   │   ├── BarChart/
│   │   │   ├── index.tsx      # Wrapper React
│   │   │   ├── useBarChart.ts # Logique D3
│   │   │   └── styles.module.css
│   │   └── LineChart/         # Structure similaire
├── hooks/                     # Hooks personnalisés
└── utils/                     # Helpers de données

BarChart interactif

Implémentation

// useBarChart.ts - Logique D3
import * as d3 from 'd3';

export const useBarChart = (containerRef: React.RefObject, data: number[]) => {
  useEffect(() => {
    if (!containerRef.current) return;

    const width = 600;
    const height = 400;
    
    const svg = d3.select(containerRef.current)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    // Échelles et axes
    const xScale = d3.scaleBand()
      .domain(data.map((_, i) => `Item ${i+1}`))
      .range([0, width])
      .padding(0.2);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data) || 0])
      .range([height, 0]);

    // Création des barres
    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (_, i) => xScale(`Item ${i+1}`) || 0)
      .attr('y', d => yScale(d))
      .attr('width', xScale.bandwidth())
      .attr('height', d => height - yScale(d))
      .attr('fill', '#4a6bdf');

    return () => { containerRef.current?.firstChild?.remove() };
  }, [data]);
};

Wrapper React

// BarChart/index.tsx
import React, { useEffect, useRef } from 'react';
import { useBarChart } from './useBarChart';

interface BarChartProps {
  data: number[];
}

export const BarChart: React.FC = ({ data }) => {
  const containerRef = useRef(null);
  
  useBarChart(containerRef, data);

  return (
     
      ref={containerRef}
      style={{ width: '100%', height: '400px' }
    
  );
};

Bonnes pratiques avancées

Optimisation des performances

Utilisez useMemo pour le prétraitement des données
Débouncez les redimensionnements de fenêtre
Limitez les ré-renders avec React.memo
Utilisez des transitions D3 pour les animations
Virtualisez les grands jeux de données

Gestion des mises à jour

// Dans useBarChart.ts
useEffect(() => {
  // Mise à jour des données existantes
  svg.selectAll('rect')
    .data(newData)
    .transition()
    .duration(500)
    .attr('y', d => yScale(d))
    .attr('height', d => height - yScale(d));

  // Gestion des entrées/sorties
  const bars = svg.selectAll('rect')
    .data(newData);

  bars.exit().remove();
  
  bars.enter()
    .append('rect')
    .merge(bars)
    .attr('x', (_, i) => xScale(`Item ${i+1}`) || 0)
    .attr('y', d => yScale(d))
    .attr('width', xScale.bandwidth())
    .attr('height', d => height - yScale(d))
    .attr('fill', '#4a6bdf');
}, [newData]);

Bibliothèques complémentaires

Écosystème utile

d3-scale-chromatic : Palettes de couleurs
d3-zoom : Interactions de zoom
d3-force : Graphiques en réseau
react-spring : Animations avancées
victory : Alternative haut niveau

Retour au blog