#3 D3 naar react

React werkt anders

Omdat ik nu alles met react ga doen moet ik eigenlijk één grote aanpassing doen in mijn code, en dat is namelijk werken met een functie. Bij mijn normale D3 code wordt alles automatisch uitgevoerd, en staat mijn javascript bestand gewoon gelinkt met mijn HTML. Omdat react dit op een andere manier doet is dit niet mogelijk, en moet ik al mijn code "handmatig" uitvoeren door middel van een functie. Dit is gelukkig niet al te veel werk.

import * as d3 from 'd3';
import { onZoom, mapSVG, mapPath } from './modules/mapCode';
import { getStorage } from '../localStorage';

function loadMap() {
    //code goes in here
}

export default loadMap

Hierboven staat een voorbeeld van hoe ik dit heb aangepakt. Alle code staat in 1 functie, die vervolgens wordt geëxporteerd. Variabelen en functies die ik ook in andere bestanden nodig heb worden geïmporteerd uit een ander bestand, zodat dit vanuit meerdere bestanden toegankelijk is. Ik gebruik dezelfde methode voor mijn cirkels op de map, en mijn barchart.