ActesCitoyens/assets/app/frontend/js/bulle.js

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import * as am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected";

// Create chart
let chart = am4core.create("carto-bulles", am4plugins_forceDirected.ForceDirectedTree);

// Create series
let series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

series.dataSource.url = routes.app_carto_json;
// Set data
// series.data = [{
//     "name": "Nos révoltes",
//     "link": ["Nos rêves"],
//     "children": [{
//         "name": "A1", "value": 100
//     }, {
//         "name": "A2", "value": 60
//     }, {
//         "name": "A3", "value": 30
//     }]
// }, {
//     "name": "Nos rêves",
//     "link": ["Les actions \n inspirantes"],
//     "children": [{
//         "name": "B1", "value": 135
//     }, {
//         "name": "B2", "value": 98
//     }, {
//         "name": "B3", "value": 56
//     }]
// }, {
//     "name": "Les actions \n inspirantes",
//     "link": ["Les actions \n à booster"],
//     "children": [{
//         "name": "C1", "value": 335
//     }, {
//         "name": "C2", "value": 148
//     }, {
//         "name": "C3", "value": 126
//     }, {
//         "name": "C4", "value": 26
//     }]
// }, {
//     "name": "Les actions \n à booster",
//     "link": ["Nos révoltes"],
//     "children": [{
//         "name": "D1", "value": 415
//     }, {
//         "name": "D2", "value": 148
//     }, {
//         "name": "D3", "value": 89
//     }, {
//         "name": "D4", "value": 64
//     }, {
//         "name": "D5", "value": 16
//     }]
// }];

series.nodes.template.events.on("hit", function(event) {
    console.log(event.target.dataItem.nb);
});

series.manyBodyStrength = -25;
series.links.template.strength = 2;
series.centerStrength = 1.2;

//active le zoom
chart.zoomable = true;
//Nombre de level affiché par défaut
series.maxLevels = 1

//link entre "frere"
// series.dataFields.id = "name";
// series.dataFields.linkWith = "link";

//distance entre les bulles
series.links.template.distance = 1.7;

// Set up data fields
series.dataFields.name = "name";
series.dataFields.children = "children";
series.dataFields.nb = "nb";

// Add labels
series.nodes.template.label.text = "{name}";
series.fontSize = 20;
series.minRadius = 70;
series.maxRadius = 100;

//Couleur des bulles
series.colors.list = [
    am4core.color("#dc5b2f"),
    am4core.color("#fce767"),
    am4core.color("#97533a"),
    am4core.color("#568b6f")
];

//Apparence des liens entre les bulles
series.links.template.strokeWidth = 5;
series.links.template.strokeOpacity = 1;

//tooltip
series.nodes.template.tooltipText = "{nb}";