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