El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Integració amb Altres Llibreries

Següent ►
►

En aquest tema, explorarem com integrar D3.js amb altres llibreries per millorar les nostres visualitzacions i fer-les més interactives i funcionals. Aprendrem a combinar D3.js amb llibreries com jQuery, Lodash, i frameworks com React i Angular.

Objectius

  • Entendre com combinar D3.js amb altres llibreries de JavaScript.
  • Aprendre a utilitzar jQuery per manipular el DOM juntament amb D3.js.
  • Integrar Lodash per a la manipulació de dades.
  • Utilitzar D3.js amb frameworks com React i Angular.

  1. Integració amb jQuery

Per què utilitzar jQuery amb D3.js?

jQuery és una llibreria de JavaScript que simplifica la manipulació del DOM, la gestió d'esdeveniments i les peticions AJAX. Tot i que D3.js també pot manipular el DOM, jQuery pot fer que algunes tasques siguin més senzilles i llegibles.

Exemple Pràctic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Integració de D3.js amb jQuery</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <button id="update">Actualitza Gràfic</button>

    <script>
        // Dades inicials
        const data = [10, 20, 30, 40, 50];

        // Crear un gràfic de barres amb D3.js
        const svg = d3.select("#chart")
            .append("svg")
            .attr("width", 500)
            .attr("height", 100);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 30)
            .attr("y", d => 100 - d)
            .attr("width", 25)
            .attr("height", d => d)
            .attr("fill", "blue");

        // Utilitzar jQuery per actualitzar el gràfic
        $("#update").click(function() {
            const newData = [50, 40, 30, 20, 10];
            svg.selectAll("rect")
                .data(newData)
                .transition()
                .duration(1000)
                .attr("y", d => 100 - d)
                .attr("height", d => d);
        });
    </script>
</body>
</html>

Explicació

  • D3.js s'utilitza per crear el gràfic de barres inicial.
  • jQuery s'utilitza per gestionar l'esdeveniment de clic del botó i actualitzar el gràfic amb noves dades.

  1. Integració amb Lodash

Per què utilitzar Lodash amb D3.js?

Lodash és una llibreria de JavaScript que proporciona utilitats per treballar amb arrays, objectes i altres tipus de dades. Pot ser molt útil per manipular dades abans de visualitzar-les amb D3.js.

Exemple Pràctic

// Incloure Lodash
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script>
    // Dades inicials
    const data = [
        { name: 'A', value: 10 },
        { name: 'B', value: 20 },
        { name: 'C', value: 30 },
        { name: 'D', value: 40 },
        { name: 'E', value: 50 }
    ];

    // Utilitzar Lodash per filtrar dades
    const filteredData = _.filter(data, d => d.value > 20);

    // Crear un gràfic de barres amb D3.js
    const svg = d3.select("#chart")
        .append("svg")
        .attr("width", 500)
        .attr("height", 100);

    svg.selectAll("rect")
        .data(filteredData)
        .enter()
        .append("rect")
        .attr("x", (d, i) => i * 30)
        .attr("y", d => 100 - d.value)
        .attr("width", 25)
        .attr("height", d => d.value)
        .attr("fill", "green");
</script>

Explicació

  • Lodash s'utilitza per filtrar les dades abans de passar-les a D3.js per crear el gràfic de barres.

  1. Integració amb React

Per què utilitzar React amb D3.js?

React és una llibreria de JavaScript per construir interfícies d'usuari. Utilitzar React amb D3.js permet crear components reutilitzables i gestionar l'estat de l'aplicació de manera eficient.

Exemple Pràctic

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const BarChart = ({ data }) => {
    const ref = useRef();

    useEffect(() => {
        const svg = d3.select(ref.current)
            .attr("width", 500)
            .attr("height", 100);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * 30)
            .attr("y", d => 100 - d)
            .attr("width", 25)
            .attr("height", d => d)
            .attr("fill", "purple");
    }, [data]);

    return <svg ref={ref}></svg>;
};

export default BarChart;

Explicació

  • React s'utilitza per crear un component de gràfic de barres reutilitzable.
  • D3.js s'utilitza dins del component per crear i actualitzar el gràfic de barres.

  1. Integració amb Angular

Per què utilitzar Angular amb D3.js?

Angular és un framework de JavaScript per construir aplicacions web. Integrar D3.js amb Angular permet aprofitar les capacitats de D3.js per a la visualització de dades dins d'una aplicació Angular estructurada.

Exemple Pràctic

// bar-chart.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-bar-chart',
  template: '<svg></svg>',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
  private data = [10, 20, 30, 40, 50];

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    this.createChart();
  }

  private createChart(): void {
    const svg = d3.select(this.el.nativeElement.querySelector('svg'))
      .attr('width', 500)
      .attr('height', 100);

    svg.selectAll('rect')
      .data(this.data)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 30)
      .attr('y', d => 100 - d)
      .attr('width', 25)
      .attr('height', d => d)
      .attr('fill', 'orange');
  }
}

Explicació

  • Angular s'utilitza per crear un component de gràfic de barres.
  • D3.js s'utilitza dins del component per crear i actualitzar el gràfic de barres.

Exercicis Pràctics

Exercici 1: Integració amb jQuery

  1. Crea un gràfic de línies amb D3.js.
  2. Utilitza jQuery per afegir un botó que canviï el color de les línies quan es faci clic.

Exercici 2: Integració amb Lodash

  1. Crea un gràfic de dispersió amb D3.js.
  2. Utilitza Lodash per ordenar les dades abans de visualitzar-les.

Exercici 3: Integració amb React

  1. Crea un component de gràfic de pastís amb React i D3.js.
  2. Fes que el component actualitzi el gràfic quan es rebin noves dades.

Exercici 4: Integració amb Angular

  1. Crea un component de gràfic de línies amb Angular i D3.js.
  2. Fes que el component actualitzi el gràfic quan es rebin noves dades.

Conclusió

Integrar D3.js amb altres llibreries i frameworks pot millorar significativament les capacitats de les teves visualitzacions. jQuery pot simplificar la manipulació del DOM, Lodash pot ajudar amb la manipulació de dades, i frameworks com React i Angular poden proporcionar una estructura robusta per a les teves aplicacions. Practica aquests exemples i exercicis per dominar la integració de D3.js amb altres tecnologies.

◄ Anterior
◄
Següent ►
►

D3.js: De Principiant a Avançat

Mòdul 1: Introducció a D3.js

Mòdul 2: Treballant amb Seleccions

Mòdul 3: Dades i Escales

Mòdul 4: Creant Visualitzacions Bàsiques

Mòdul 5: Visualitzacions Avançades

Mòdul 6: Interactivitat i Animació

Mòdul 7: Treballant amb Dades Reals

Mòdul 8: Rendiment i Optimització

Mòdul 9: Millors Pràctiques i Tècniques Avançades

Mòdul 10: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats