Force Directed Graph
See what happens when you remove some main characters:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style> .info { padding: 1rem 0 0; min-height: 529px; background: #fff; box-sizing: border-box; } .demo-title { margin: 0 0 1rem; display: block; text-align: center; font: 500 1.125rem/1.3 sans-serif; } .control-bar { margin: 0 auto; padding: 0 0 1rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; } .control-bar.loaded { display: flex !important; opacity: 1; } .control-bar>*+* { margin-left: 10px; } .control-bar button { min-width: 45px; height: 40px; cursor: pointer; color: #fff; background: #074361; border: 1px solid #074361; border-radius: 4px; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { min-height: 150px; width: 100%; height: 100%; } .zc-ref { display: none; } </style> </head> <body class="zc-body"> <div class="info"> <strong class="demo-title">See what happens when you remove some main characters:</strong> <div data-jsref="control-bar" class="control-bar" hidden> <button data-jsref="remove-valjean">Remove Valjean</button> <button data-jsref="remove-gavroche">Remove Gavroche</button> <button data-jsref="remove-javert">Remove Javert</button> </div> <div id="myChart"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div> </div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // INIT // ---------------------------- // Load dependent modules zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; // DEFINE CHART LOCATIONS (IDS) // ----------------------------- // Main chart render location let chartId = 'myChart'; // DOM ELEMENTS // ----------------------------- let controlBar = document.querySelector('[data-jsref="control-bar"]'); let removeValjeanBtn = document.querySelector('[data-jsref="remove-valjean"]'); let removeGavrocheBtn = document.querySelector('[data-jsref="remove-gavroche"]'); let removeJavertBtn = document.querySelector('[data-jsref="remove-javert"]'); // CHART CONFIG // ----------------------------- let chartData = [{ "id": "Myriel", "group": 1 }, { "id": "Napoleon", "group": 1 }, { "id": "Mlle.Baptistine", "group": 1 }, { "id": "Mme.Magloire", "group": 1 }, { "id": "CountessdeLo", "group": 1 }, { "id": "Geborand", "group": 1 }, { "id": "Champtercier", "group": 1 }, { "id": "Cravatte", "group": 1 }, { "id": "Count", "group": 1 }, { "id": "OldMan", "group": 1 }, { "id": "Labarre", "group": 2 }, { "id": "Valjean", "group": 2 }, { "id": "Marguerite", "group": 3 }, { "id": "Mme.deR", "group": 2 }, { "id": "Isabeau", "group": 2 }, { "id": "Gervais", "group": 2 }, { "id": "Tholomyes", "group": 3 }, { "id": "Listolier", "group": 3 }, { "id": "Fameuil", "group": 3 }, { "id": "Blacheville", "group": 3 }, { "id": "Favourite", "group": 3 }, { "id": "Dahlia", "group": 3 }, { "id": "Zephine", "group": 3 }, { "id": "Fantine", "group": 3 }, { "id": "Mme.Thenardier", "group": 4 }, { "id": "Thenardier", "group": 4 }, { "id": "Cosette", "group": 5 }, { "id": "Javert", "group": 4 }, { "id": "Fauchelevent", "group": 0 }, { "id": "Bamatabois", "group": 2 }, { "id": "Perpetue", "group": 3 }, { "id": "Simplice", "group": 2 }, { "id": "Scaufflaire", "group": 2 }, { "id": "Woman1", "group": 2 }, { "id": "Judge", "group": 2 }, { "id": "Champmathieu", "group": 2 }, { "id": "Brevet", "group": 2 }, { "id": "Chenildieu", "group": 2 }, { "id": "Cochepaille", "group": 2 }, { "id": "Pontmercy", "group": 4 }, { "id": "Boulatruelle", "group": 6 }, { "id": "Eponine", "group": 4 }, { "id": "Anzelma", "group": 4 }, { "id": "Woman2", "group": 5 }, { "id": "MotherInnocent", "group": 0 }, { "id": "Gribier", "group": 0 }, { "id": "Jondrette", "group": 7 }, { "id": "Mme.Burgon", "group": 7 }, { "id": "Gavroche", "group": 8 }, { "id": "Gillenormand", "group": 5 }, { "id": "Magnon", "group": 5 }, { "id": "Mlle.Gillenormand", "group": 5 }, { "id": "Mme.Pontmercy", "group": 5 }, { "id": "Mlle.Vaubois", "group": 5 }, { "id": "Lt.Gillenormand", "group": 5 }, { "id": "Marius", "group": 8 }, { "id": "BaronessT", "group": 5 }, { "id": "Mabeuf", "group": 8 }, { "id": "Enjolras", "group": 8 }, { "id": "Combeferre", "group": 8 }, { "id": "Prouvaire", "group": 8 }, { "id": "Feuilly", "group": 8 }, { "id": "Courfeyrac", "group": 8 }, { "id": "Bahorel", "group": 8 }, { "id": "Bossuet", "group": 8 }, { "id": "Joly", "group": 8 }, { "id": "Grantaire", "group": 8 }, { "id": "MotherPlutarch", "group": 9 }, { "id": "Gueulemer", "group": 4 }, { "id": "Babet", "group": 4 }, { "id": "Claquesous", "group": 4 }, { "id": "Montparnasse", "group": 4 }, { "id": "Toussaint", "group": 5 }, { "id": "Child1", "group": 10 }, { "id": "Child2", "group": 10 }, { "id": "Brujon", "group": 4 }, { "id": "Mme.Hucheloup", "group": 8 }, { "source": "Napoleon", "target": "Myriel", "value": 1 }, { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 }, { "source": "Mme.Magloire", "target": "Myriel", "value": 10 }, { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 }, { "source": "CountessdeLo", "target": "Myriel", "value": 1 }, { "source": "Geborand", "target": "Myriel", "value": 1 }, { "source": "Champtercier", "target": "Myriel", "value": 1 }, { "source": "Cravatte", "target": "Myriel", "value": 1 }, { "source": "Count", "target": "Myriel", "value": 2 }, { "source": "OldMan", "target": "Myriel", "value": 1 }, { "source": "Valjean", "target": "Labarre", "value": 1 }, { "source": "Valjean", "target": "Mme.Magloire", "value": 3 }, { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 }, { "source": "Valjean", "target": "Myriel", "value": 5 }, { "source": "Marguerite", "target": "Valjean", "value": 1 }, { "source": "Mme.deR", "target": "Valjean", "value": 1 }, { "source": "Isabeau", "target": "Valjean", "value": 1 }, { "source": "Gervais", "target": "Valjean", "value": 1 }, { "source": "Listolier", "target": "Tholomyes", "value": 4 }, { "source": "Fameuil", "target": "Tholomyes", "value": 4 }, { "source": "Fameuil", "target": "Listolier", "value": 4 }, { "source": "Blacheville", "target": "Tholomyes", "value": 4 }, { "source": "Blacheville", "target": "Listolier", "value": 4 }, { "source": "Blacheville", "target": "Fameuil", "value": 4 }, { "source": "Favourite", "target": "Tholomyes", "value": 3 }, { "source": "Favourite", "target": "Listolier", "value": 3 }, { "source": "Favourite", "target": "Fameuil", "value": 3 }, { "source": "Favourite", "target": "Blacheville", "value": 4 }, { "source": "Dahlia", "target": "Tholomyes", "value": 3 }, { "source": "Dahlia", "target": "Listolier", "value": 3 }, { "source": "Dahlia", "target": "Fameuil", "value": 3 }, { "source": "Dahlia", "target": "Blacheville", "value": 3 }, { "source": "Dahlia", "target": "Favourite", "value": 5 }, { "source": "Zephine", "target": "Tholomyes", "value": 3 }, { "source": "Zephine", "target": "Listolier", "value": 3 }, { "source": "Zephine", "target": "Fameuil", "value": 3 }, { "source": "Zephine", "target": "Blacheville", "value": 3 }, { "source": "Zephine", "target": "Favourite", "value": 4 }, { "source": "Zephine", "target": "Dahlia", "value": 4 }, { "source": "Fantine", "target": "Tholomyes", "value": 3 }, { "source": "Fantine", "target": "Listolier", "value": 3 }, { "source": "Fantine", "target": "Fameuil", "value": 3 }, { "source": "Fantine", "target": "Blacheville", "value": 3 }, { "source": "Fantine", "target": "Favourite", "value": 4 }, { "source": "Fantine", "target": "Dahlia", "value": 4 }, { "source": "Fantine", "target": "Zephine", "value": 4 }, { "source": "Fantine", "target": "Marguerite", "value": 2 }, { "source": "Fantine", "target": "Valjean", "value": 9 }, { "source": "Mme.Thenardier", "target": "Fantine", "value": 2 }, { "source": "Mme.Thenardier", "target": "Valjean", "value": 7 }, { "source": "Thenardier", "target": "Mme.Thenardier", "value": 13 }, { "source": "Thenardier", "target": "Fantine", "value": 1 }, { "source": "Thenardier", "target": "Valjean", "value": 12 }, { "source": "Cosette", "target": "Mme.Thenardier", "value": 4 }, { "source": "Cosette", "target": "Valjean", "value": 31 }, { "source": "Cosette", "target": "Tholomyes", "value": 1 }, { "source": "Cosette", "target": "Thenardier", "value": 1 }, { "source": "Javert", "target": "Valjean", "value": 17 }, { "source": "Javert", "target": "Fantine", "value": 5 }, { "source": "Javert", "target": "Thenardier", "value": 5 }, { "source": "Javert", "target": "Mme.Thenardier", "value": 1 }, { "source": "Javert", "target": "Cosette", "value": 1 }, { "source": "Fauchelevent", "target": "Valjean", "value": 8 }, { "source": "Fauchelevent", "target": "Javert", "value": 1 }, { "source": "Bamatabois", "target": "Fantine", "value": 1 }, { "source": "Bamatabois", "target": "Javert", "value": 1 }, { "source": "Bamatabois", "target": "Valjean", "value": 2 }, { "source": "Perpetue", "target": "Fantine", "value": 1 }, { "source": "Simplice", "target": "Perpetue", "value": 2 }, { "source": "Simplice", "target": "Valjean", "value": 3 }, { "source": "Simplice", "target": "Fantine", "value": 2 }, { "source": "Simplice", "target": "Javert", "value": 1 }, { "source": "Scaufflaire", "target": "Valjean", "value": 1 }, { "source": "Woman1", "target": "Valjean", "value": 2 }, { "source": "Woman1", "target": "Javert", "value": 1 }, { "source": "Judge", "target": "Valjean", "value": 3 }, { "source": "Judge", "target": "Bamatabois", "value": 2 }, { "source": "Champmathieu", "target": "Valjean", "value": 3 }, { "source": "Champmathieu", "target": "Judge", "value": 3 }, { "source": "Champmathieu", "target": "Bamatabois", "value": 2 }, { "source": "Brevet", "target": "Judge", "value": 2 }, { "source": "Brevet", "target": "Champmathieu", "value": 2 }, { "source": "Brevet", "target": "Valjean", "value": 2 }, { "source": "Brevet", "target": "Bamatabois", "value": 1 }, { "source": "Chenildieu", "target": "Judge", "value": 2 }, { "source": "Chenildieu", "target": "Champmathieu", "value": 2 }, { "source": "Chenildieu", "target": "Brevet", "value": 2 }, { "source": "Chenildieu", "target": "Valjean", "value": 2 }, { "source": "Chenildieu", "target": "Bamatabois", "value": 1 }, { "source": "Cochepaille", "target": "Judge", "value": 2 }, { "source": "Cochepaille", "target": "Champmathieu", "value": 2 }, { "source": "Cochepaille", "target": "Brevet", "value": 2 }, { "source": "Cochepaille", "target": "Chenildieu", "value": 2 }, { "source": "Cochepaille", "target": "Valjean", "value": 2 }, { "source": "Cochepaille", "target": "Bamatabois", "value": 1 }, { "source": "Pontmercy", "target": "Thenardier", "value": 1 }, { "source": "Boulatruelle", "target": "Thenardier", "value": 1 }, { "source": "Eponine", "target": "Mme.Thenardier", "value": 2 }, { "source": "Eponine", "target": "Thenardier", "value": 3 }, { "source": "Anzelma", "target": "Eponine", "value": 2 }, { "source": "Anzelma", "target": "Thenardier", "value": 2 }, { "source": "Anzelma", "target": "Mme.Thenardier", "value": 1 }, { "source": "Woman2", "target": "Valjean", "value": 3 }, { "source": "Woman2", "target": "Cosette", "value": 1 }, { "source": "Woman2", "target": "Javert", "value": 1 }, { "source": "MotherInnocent", "target": "Fauchelevent", "value": 3 }, { "source": "MotherInnocent", "target": "Valjean", "value": 1 }, { "source": "Gribier", "target": "Fauchelevent", "value": 2 }, { "source": "Mme.Burgon", "target": "Jondrette", "value": 1 }, { "source": "Gavroche", "target": "Mme.Burgon", "value": 2 }, { "source": "Gavroche", "target": "Thenardier", "value": 1 }, { "source": "Gavroche", "target": "Javert", "value": 1 }, { "source": "Gavroche", "target": "Valjean", "value": 1 }, { "source": "Gillenormand", "target": "Cosette", "value": 3 }, { "source": "Gillenormand", "target": "Valjean", "value": 2 }, { "source": "Magnon", "target": "Gillenormand", "value": 1 }, { "source": "Magnon", "target": "Mme.Thenardier", "value": 1 }, { "source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9 }, { "source": "Mlle.Gillenormand", "target": "Cosette", "value": 2 }, { "source": "Mlle.Gillenormand", "target": "Valjean", "value": 2 }, { "source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1 }, { "source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1 }, { "source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1 }, { "source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2 }, { "source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1 }, { "source": "Lt.Gillenormand", "target": "Cosette", "value": 1 }, { "source": "Marius", "target": "Mlle.Gillenormand", "value": 6 }, { "source": "Marius", "target": "Gillenormand", "value": 12 }, { "source": "Marius", "target": "Pontmercy", "value": 1 }, { "source": "Marius", "target": "Lt.Gillenormand", "value": 1 }, { "source": "Marius", "target": "Cosette", "value": 21 }, { "source": "Marius", "target": "Valjean", "value": 19 }, { "source": "Marius", "target": "Tholomyes", "value": 1 }, { "source": "Marius", "target": "Thenardier", "value": 2 }, { "source": "Marius", "target": "Eponine", "value": 5 }, { "source": "Marius", "target": "Gavroche", "value": 4 }, { "source": "BaronessT", "target": "Gillenormand", "value": 1 }, { "source": "BaronessT", "target": "Marius", "value": 1 }, { "source": "Mabeuf", "target": "Marius", "value": 1 }, { "source": "Mabeuf", "target": "Eponine", "value": 1 }, { "source": "Mabeuf", "target": "Gavroche", "value": 1 }, { "source": "Enjolras", "target": "Marius", "value": 7 }, { "source": "Enjolras", "target": "Gavroche", "value": 7 }, { "source": "Enjolras", "target": "Javert", "value": 6 }, { "source": "Enjolras", "target": "Mabeuf", "value": 1 }, { "source": "Enjolras", "target": "Valjean", "value": 4 }, { "source": "Combeferre", "target": "Enjolras", "value": 15 }, { "source": "Combeferre", "target": "Marius", "value": 5 }, { "source": "Combeferre", "target": "Gavroche", "value": 6 }, { "source": "Combeferre", "target": "Mabeuf", "value": 2 }, { "source": "Prouvaire", "target": "Gavroche", "value": 1 }, { "source": "Prouvaire", "target": "Enjolras", "value": 4 }, { "source": "Prouvaire", "target": "Combeferre", "value": 2 }, { "source": "Feuilly", "target": "Gavroche", "value": 2 }, { "source": "Feuilly", "target": "Enjolras", "value": 6 }, { "source": "Feuilly", "target": "Prouvaire", "value": 2 }, { "source": "Feuilly", "target": "Combeferre", "value": 5 }, { "source": "Feuilly", "target": "Mabeuf", "value": 1 }, { "source": "Feuilly", "target": "Marius", "value": 1 }, { "source": "Courfeyrac", "target": "Marius", "value": 9 }, { "source": "Courfeyrac", "target": "Enjolras", "value": 17 }, { "source": "Courfeyrac", "target": "Combeferre", "value": 13 }, { "source": "Courfeyrac", "target": "Gavroche", "value": 7 }, { "source": "Courfeyrac", "target": "Mabeuf", "value": 2 }, { "source": "Courfeyrac", "target": "Eponine", "value": 1 }, { "source": "Courfeyrac", "target": "Feuilly", "value": 6 }, { "source": "Courfeyrac", "target": "Prouvaire", "value": 3 }, { "source": "Bahorel", "target": "Combeferre", "value": 5 }, { "source": "Bahorel", "target": "Gavroche", "value": 5 }, { "source": "Bahorel", "target": "Courfeyrac", "value": 6 }, { "source": "Bahorel", "target": "Mabeuf", "value": 2 }, { "source": "Bahorel", "target": "Enjolras", "value": 4 }, { "source": "Bahorel", "target": "Feuilly", "value": 3 }, { "source": "Bahorel", "target": "Prouvaire", "value": 2 }, { "source": "Bahorel", "target": "Marius", "value": 1 }, { "source": "Bossuet", "target": "Marius", "value": 5 }, { "source": "Bossuet", "target": "Courfeyrac", "value": 12 }, { "source": "Bossuet", "target": "Gavroche", "value": 5 }, { "source": "Bossuet", "target": "Bahorel", "value": 4 }, { "source": "Bossuet", "target": "Enjolras", "value": 10 }, { "source": "Bossuet", "target": "Feuilly", "value": 6 }, { "source": "Bossuet", "target": "Prouvaire", "value": 2 }, { "source": "Bossuet", "target": "Combeferre", "value": 9 }, { "source": "Bossuet", "target": "Mabeuf", "value": 1 }, { "source": "Bossuet", "target": "Valjean", "value": 1 }, { "source": "Joly", "target": "Bahorel", "value": 5 }, { "source": "Joly", "target": "Bossuet", "value": 7 }, { "source": "Joly", "target": "Gavroche", "value": 3 }, { "source": "Joly", "target": "Courfeyrac", "value": 5 }, { "source": "Joly", "target": "Enjolras", "value": 5 }, { "source": "Joly", "target": "Feuilly", "value": 5 }, { "source": "Joly", "target": "Prouvaire", "value": 2 }, { "source": "Joly", "target": "Combeferre", "value": 5 }, { "source": "Joly", "target": "Mabeuf", "value": 1 }, { "source": "Joly", "target": "Marius", "value": 2 }, { "source": "Grantaire", "target": "Bossuet", "value": 3 }, { "source": "Grantaire", "target": "Enjolras", "value": 3 }, { "source": "Grantaire", "target": "Combeferre", "value": 1 }, { "source": "Grantaire", "target": "Courfeyrac", "value": 2 }, { "source": "Grantaire", "target": "Joly", "value": 2 }, { "source": "Grantaire", "target": "Gavroche", "value": 1 }, { "source": "Grantaire", "target": "Bahorel", "value": 1 }, { "source": "Grantaire", "target": "Feuilly", "value": 1 }, { "source": "Grantaire", "target": "Prouvaire", "value": 1 }, { "source": "MotherPlutarch", "target": "Mabeuf", "value": 3 }, { "source": "Gueulemer", "target": "Thenardier", "value": 5 }, { "source": "Gueulemer", "target": "Valjean", "value": 1 }, { "source": "Gueulemer", "target": "Mme.Thenardier", "value": 1 }, { "source": "Gueulemer", "target": "Javert", "value": 1 }, { "source": "Gueulemer", "target": "Gavroche", "value": 1 }, { "source": "Gueulemer", "target": "Eponine", "value": 1 }, { "source": "Babet", "target": "Thenardier", "value": 6 }, { "source": "Babet", "target": "Gueulemer", "value": 6 }, { "source": "Babet", "target": "Valjean", "value": 1 }, { "source": "Babet", "target": "Mme.Thenardier", "value": 1 }, { "source": "Babet", "target": "Javert", "value": 2 }, { "source": "Babet", "target": "Gavroche", "value": 1 }, { "source": "Babet", "target": "Eponine", "value": 1 }, { "source": "Claquesous", "target": "Thenardier", "value": 4 }, { "source": "Claquesous", "target": "Babet", "value": 4 }, { "source": "Claquesous", "target": "Gueulemer", "value": 4 }, { "source": "Claquesous", "target": "Valjean", "value": 1 }, { "source": "Claquesous", "target": "Mme.Thenardier", "value": 1 }, { "source": "Claquesous", "target": "Javert", "value": 1 }, { "source": "Claquesous", "target": "Eponine", "value": 1 }, { "source": "Claquesous", "target": "Enjolras", "value": 1 }, { "source": "Montparnasse", "target": "Javert", "value": 1 }, { "source": "Montparnasse", "target": "Babet", "value": 2 }, { "source": "Montparnasse", "target": "Gueulemer", "value": 2 }, { "source": "Montparnasse", "target": "Claquesous", "value": 2 }, { "source": "Montparnasse", "target": "Valjean", "value": 1 }, { "source": "Montparnasse", "target": "Gavroche", "value": 1 }, { "source": "Montparnasse", "target": "Eponine", "value": 1 }, { "source": "Montparnasse", "target": "Thenardier", "value": 1 }, { "source": "Toussaint", "target": "Cosette", "value": 2 }, { "source": "Toussaint", "target": "Javert", "value": 1 }, { "source": "Toussaint", "target": "Valjean", "value": 1 }, { "source": "Child1", "target": "Gavroche", "value": 2 }, { "source": "Child2", "target": "Gavroche", "value": 2 }, { "source": "Child2", "target": "Child1", "value": 3 }, { "source": "Brujon", "target": "Babet", "value": 3 }, { "source": "Brujon", "target": "Gueulemer", "value": 3 }, { "source": "Brujon", "target": "Thenardier", "value": 3 }, { "source": "Brujon", "target": "Gavroche", "value": 1 }, { "source": "Brujon", "target": "Eponine", "value": 1 }, { "source": "Brujon", "target": "Claquesous", "value": 1 }, { "source": "Brujon", "target": "Montparnasse", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Bossuet", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Joly", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Grantaire", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Bahorel", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 } ]; // CHART CONFIG // ----------------------------- let chartConfig = { type: 'tree', borderWidth: '1px', borderColor: '#999', options: { aspect: 'graph', attractionConstant: 0.7, minLinkWidth: '1px', maxLinkWidth: '5px', minSize: '5px', maxSize: '5px', repulsionConstant: 900, repulsionDistanceFactor: 20, springLength: '50px', textAttr: 'id', weightedNodes: 0, weightedLinks: 0, link: { fastVectorPath: true }, node: { borderWidth: 0, label: { visible: false } }, nodes: { Valjean: { type: 'diamond', borderColor: '#333', borderWidth: '1px', size: '8px' }, Gavroche: { type: 'rpoly6', borderColor: '#333', borderWidth: '1px', size: '8px' }, Javert: { type: 'triangle', borderColor: '#333', borderWidth: '1px', size: '8px' } } }, plotarea: {}, series: chartData }; // RENDER CHART // ----------------------------- zingchart.render({ id: chartId, width: '100%', height: 500, output: 'canvas', data: chartConfig, events: { load: load } }); // CHART EVENTS // ----------------------------- // Remove Valjean removeValjeanBtn.addEventListener('click', function(e) { remove('Valjean'); }); // Remove Gavroche removeGavrocheBtn.addEventListener('click', function(e) { remove('Gavroche'); }); // Remove Javert removeJavertBtn.addEventListener('click', function(e) { remove('Javert'); }); // HELPER FNS // ----------------------------- function load() { controlBar.classList.add('loaded'); } function remove(name) { if (!name) return; // Update chart zingchart.exec(chartId, 'tree.removenode', { id: name }); } </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script src="https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body class="zc-body"> <div class="info"> <strong class="demo-title">See what happens when you remove some main characters:</strong> <div data-jsref="control-bar" class="control-bar" hidden> <button data-jsref="remove-valjean">Remove Valjean</button> <button data-jsref="remove-gavroche">Remove Gavroche</button> <button data-jsref="remove-javert">Remove Javert</button> </div> <div id="myChart"> <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a> </div> </div> </body> </html>
// INIT // ---------------------------- // Load dependent modules zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; // DEFINE CHART LOCATIONS (IDS) // ----------------------------- // Main chart render location let chartId = 'myChart'; // DOM ELEMENTS // ----------------------------- let controlBar = document.querySelector('[data-jsref="control-bar"]'); let removeValjeanBtn = document.querySelector('[data-jsref="remove-valjean"]'); let removeGavrocheBtn = document.querySelector('[data-jsref="remove-gavroche"]'); let removeJavertBtn = document.querySelector('[data-jsref="remove-javert"]'); // CHART CONFIG // ----------------------------- let chartData = [ { "id": "Myriel", "group": 1 }, { "id": "Napoleon", "group": 1 }, { "id": "Mlle.Baptistine", "group": 1 }, { "id": "Mme.Magloire", "group": 1 }, { "id": "CountessdeLo", "group": 1 }, { "id": "Geborand", "group": 1 }, { "id": "Champtercier", "group": 1 }, { "id": "Cravatte", "group": 1 }, { "id": "Count", "group": 1 }, { "id": "OldMan", "group": 1 }, { "id": "Labarre", "group": 2 }, { "id": "Valjean", "group": 2 }, { "id": "Marguerite", "group": 3 }, { "id": "Mme.deR", "group": 2 }, { "id": "Isabeau", "group": 2 }, { "id": "Gervais", "group": 2 }, { "id": "Tholomyes", "group": 3 }, { "id": "Listolier", "group": 3 }, { "id": "Fameuil", "group": 3 }, { "id": "Blacheville", "group": 3 }, { "id": "Favourite", "group": 3 }, { "id": "Dahlia", "group": 3 }, { "id": "Zephine", "group": 3 }, { "id": "Fantine", "group": 3 }, { "id": "Mme.Thenardier", "group": 4 }, { "id": "Thenardier", "group": 4 }, { "id": "Cosette", "group": 5 }, { "id": "Javert", "group": 4 }, { "id": "Fauchelevent", "group": 0 }, { "id": "Bamatabois", "group": 2 }, { "id": "Perpetue", "group": 3 }, { "id": "Simplice", "group": 2 }, { "id": "Scaufflaire", "group": 2 }, { "id": "Woman1", "group": 2 }, { "id": "Judge", "group": 2 }, { "id": "Champmathieu", "group": 2 }, { "id": "Brevet", "group": 2 }, { "id": "Chenildieu", "group": 2 }, { "id": "Cochepaille", "group": 2 }, { "id": "Pontmercy", "group": 4 }, { "id": "Boulatruelle", "group": 6 }, { "id": "Eponine", "group": 4 }, { "id": "Anzelma", "group": 4 }, { "id": "Woman2", "group": 5 }, { "id": "MotherInnocent", "group": 0 }, { "id": "Gribier", "group": 0 }, { "id": "Jondrette", "group": 7 }, { "id": "Mme.Burgon", "group": 7 }, { "id": "Gavroche", "group": 8 }, { "id": "Gillenormand", "group": 5 }, { "id": "Magnon", "group": 5 }, { "id": "Mlle.Gillenormand", "group": 5 }, { "id": "Mme.Pontmercy", "group": 5 }, { "id": "Mlle.Vaubois", "group": 5 }, { "id": "Lt.Gillenormand", "group": 5 }, { "id": "Marius", "group": 8 }, { "id": "BaronessT", "group": 5 }, { "id": "Mabeuf", "group": 8 }, { "id": "Enjolras", "group": 8 }, { "id": "Combeferre", "group": 8 }, { "id": "Prouvaire", "group": 8 }, { "id": "Feuilly", "group": 8 }, { "id": "Courfeyrac", "group": 8 }, { "id": "Bahorel", "group": 8 }, { "id": "Bossuet", "group": 8 }, { "id": "Joly", "group": 8 }, { "id": "Grantaire", "group": 8 }, { "id": "MotherPlutarch", "group": 9 }, { "id": "Gueulemer", "group": 4 }, { "id": "Babet", "group": 4 }, { "id": "Claquesous", "group": 4 }, { "id": "Montparnasse", "group": 4 }, { "id": "Toussaint", "group": 5 }, { "id": "Child1", "group": 10 }, { "id": "Child2", "group": 10 }, { "id": "Brujon", "group": 4 }, { "id": "Mme.Hucheloup", "group": 8 }, { "source": "Napoleon", "target": "Myriel", "value": 1 }, { "source": "Mlle.Baptistine", "target": "Myriel", "value": 8 }, { "source": "Mme.Magloire", "target": "Myriel", "value": 10 }, { "source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6 }, { "source": "CountessdeLo", "target": "Myriel", "value": 1 }, { "source": "Geborand", "target": "Myriel", "value": 1 }, { "source": "Champtercier", "target": "Myriel", "value": 1 }, { "source": "Cravatte", "target": "Myriel", "value": 1 }, { "source": "Count", "target": "Myriel", "value": 2 }, { "source": "OldMan", "target": "Myriel", "value": 1 }, { "source": "Valjean", "target": "Labarre", "value": 1 }, { "source": "Valjean", "target": "Mme.Magloire", "value": 3 }, { "source": "Valjean", "target": "Mlle.Baptistine", "value": 3 }, { "source": "Valjean", "target": "Myriel", "value": 5 }, { "source": "Marguerite", "target": "Valjean", "value": 1 }, { "source": "Mme.deR", "target": "Valjean", "value": 1 }, { "source": "Isabeau", "target": "Valjean", "value": 1 }, { "source": "Gervais", "target": "Valjean", "value": 1 }, { "source": "Listolier", "target": "Tholomyes", "value": 4 }, { "source": "Fameuil", "target": "Tholomyes", "value": 4 }, { "source": "Fameuil", "target": "Listolier", "value": 4 }, { "source": "Blacheville", "target": "Tholomyes", "value": 4 }, { "source": "Blacheville", "target": "Listolier", "value": 4 }, { "source": "Blacheville", "target": "Fameuil", "value": 4 }, { "source": "Favourite", "target": "Tholomyes", "value": 3 }, { "source": "Favourite", "target": "Listolier", "value": 3 }, { "source": "Favourite", "target": "Fameuil", "value": 3 }, { "source": "Favourite", "target": "Blacheville", "value": 4 }, { "source": "Dahlia", "target": "Tholomyes", "value": 3 }, { "source": "Dahlia", "target": "Listolier", "value": 3 }, { "source": "Dahlia", "target": "Fameuil", "value": 3 }, { "source": "Dahlia", "target": "Blacheville", "value": 3 }, { "source": "Dahlia", "target": "Favourite", "value": 5 }, { "source": "Zephine", "target": "Tholomyes", "value": 3 }, { "source": "Zephine", "target": "Listolier", "value": 3 }, { "source": "Zephine", "target": "Fameuil", "value": 3 }, { "source": "Zephine", "target": "Blacheville", "value": 3 }, { "source": "Zephine", "target": "Favourite", "value": 4 }, { "source": "Zephine", "target": "Dahlia", "value": 4 }, { "source": "Fantine", "target": "Tholomyes", "value": 3 }, { "source": "Fantine", "target": "Listolier", "value": 3 }, { "source": "Fantine", "target": "Fameuil", "value": 3 }, { "source": "Fantine", "target": "Blacheville", "value": 3 }, { "source": "Fantine", "target": "Favourite", "value": 4 }, { "source": "Fantine", "target": "Dahlia", "value": 4 }, { "source": "Fantine", "target": "Zephine", "value": 4 }, { "source": "Fantine", "target": "Marguerite", "value": 2 }, { "source": "Fantine", "target": "Valjean", "value": 9 }, { "source": "Mme.Thenardier", "target": "Fantine", "value": 2 }, { "source": "Mme.Thenardier", "target": "Valjean", "value": 7 }, { "source": "Thenardier", "target": "Mme.Thenardier", "value": 13 }, { "source": "Thenardier", "target": "Fantine", "value": 1 }, { "source": "Thenardier", "target": "Valjean", "value": 12 }, { "source": "Cosette", "target": "Mme.Thenardier", "value": 4 }, { "source": "Cosette", "target": "Valjean", "value": 31 }, { "source": "Cosette", "target": "Tholomyes", "value": 1 }, { "source": "Cosette", "target": "Thenardier", "value": 1 }, { "source": "Javert", "target": "Valjean", "value": 17 }, { "source": "Javert", "target": "Fantine", "value": 5 }, { "source": "Javert", "target": "Thenardier", "value": 5 }, { "source": "Javert", "target": "Mme.Thenardier", "value": 1 }, { "source": "Javert", "target": "Cosette", "value": 1 }, { "source": "Fauchelevent", "target": "Valjean", "value": 8 }, { "source": "Fauchelevent", "target": "Javert", "value": 1 }, { "source": "Bamatabois", "target": "Fantine", "value": 1 }, { "source": "Bamatabois", "target": "Javert", "value": 1 }, { "source": "Bamatabois", "target": "Valjean", "value": 2 }, { "source": "Perpetue", "target": "Fantine", "value": 1 }, { "source": "Simplice", "target": "Perpetue", "value": 2 }, { "source": "Simplice", "target": "Valjean", "value": 3 }, { "source": "Simplice", "target": "Fantine", "value": 2 }, { "source": "Simplice", "target": "Javert", "value": 1 }, { "source": "Scaufflaire", "target": "Valjean", "value": 1 }, { "source": "Woman1", "target": "Valjean", "value": 2 }, { "source": "Woman1", "target": "Javert", "value": 1 }, { "source": "Judge", "target": "Valjean", "value": 3 }, { "source": "Judge", "target": "Bamatabois", "value": 2 }, { "source": "Champmathieu", "target": "Valjean", "value": 3 }, { "source": "Champmathieu", "target": "Judge", "value": 3 }, { "source": "Champmathieu", "target": "Bamatabois", "value": 2 }, { "source": "Brevet", "target": "Judge", "value": 2 }, { "source": "Brevet", "target": "Champmathieu", "value": 2 }, { "source": "Brevet", "target": "Valjean", "value": 2 }, { "source": "Brevet", "target": "Bamatabois", "value": 1 }, { "source": "Chenildieu", "target": "Judge", "value": 2 }, { "source": "Chenildieu", "target": "Champmathieu", "value": 2 }, { "source": "Chenildieu", "target": "Brevet", "value": 2 }, { "source": "Chenildieu", "target": "Valjean", "value": 2 }, { "source": "Chenildieu", "target": "Bamatabois", "value": 1 }, { "source": "Cochepaille", "target": "Judge", "value": 2 }, { "source": "Cochepaille", "target": "Champmathieu", "value": 2 }, { "source": "Cochepaille", "target": "Brevet", "value": 2 }, { "source": "Cochepaille", "target": "Chenildieu", "value": 2 }, { "source": "Cochepaille", "target": "Valjean", "value": 2 }, { "source": "Cochepaille", "target": "Bamatabois", "value": 1 }, { "source": "Pontmercy", "target": "Thenardier", "value": 1 }, { "source": "Boulatruelle", "target": "Thenardier", "value": 1 }, { "source": "Eponine", "target": "Mme.Thenardier", "value": 2 }, { "source": "Eponine", "target": "Thenardier", "value": 3 }, { "source": "Anzelma", "target": "Eponine", "value": 2 }, { "source": "Anzelma", "target": "Thenardier", "value": 2 }, { "source": "Anzelma", "target": "Mme.Thenardier", "value": 1 }, { "source": "Woman2", "target": "Valjean", "value": 3 }, { "source": "Woman2", "target": "Cosette", "value": 1 }, { "source": "Woman2", "target": "Javert", "value": 1 }, { "source": "MotherInnocent", "target": "Fauchelevent", "value": 3 }, { "source": "MotherInnocent", "target": "Valjean", "value": 1 }, { "source": "Gribier", "target": "Fauchelevent", "value": 2 }, { "source": "Mme.Burgon", "target": "Jondrette", "value": 1 }, { "source": "Gavroche", "target": "Mme.Burgon", "value": 2 }, { "source": "Gavroche", "target": "Thenardier", "value": 1 }, { "source": "Gavroche", "target": "Javert", "value": 1 }, { "source": "Gavroche", "target": "Valjean", "value": 1 }, { "source": "Gillenormand", "target": "Cosette", "value": 3 }, { "source": "Gillenormand", "target": "Valjean", "value": 2 }, { "source": "Magnon", "target": "Gillenormand", "value": 1 }, { "source": "Magnon", "target": "Mme.Thenardier", "value": 1 }, { "source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9 }, { "source": "Mlle.Gillenormand", "target": "Cosette", "value": 2 }, { "source": "Mlle.Gillenormand", "target": "Valjean", "value": 2 }, { "source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1 }, { "source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1 }, { "source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1 }, { "source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2 }, { "source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1 }, { "source": "Lt.Gillenormand", "target": "Cosette", "value": 1 }, { "source": "Marius", "target": "Mlle.Gillenormand", "value": 6 }, { "source": "Marius", "target": "Gillenormand", "value": 12 }, { "source": "Marius", "target": "Pontmercy", "value": 1 }, { "source": "Marius", "target": "Lt.Gillenormand", "value": 1 }, { "source": "Marius", "target": "Cosette", "value": 21 }, { "source": "Marius", "target": "Valjean", "value": 19 }, { "source": "Marius", "target": "Tholomyes", "value": 1 }, { "source": "Marius", "target": "Thenardier", "value": 2 }, { "source": "Marius", "target": "Eponine", "value": 5 }, { "source": "Marius", "target": "Gavroche", "value": 4 }, { "source": "BaronessT", "target": "Gillenormand", "value": 1 }, { "source": "BaronessT", "target": "Marius", "value": 1 }, { "source": "Mabeuf", "target": "Marius", "value": 1 }, { "source": "Mabeuf", "target": "Eponine", "value": 1 }, { "source": "Mabeuf", "target": "Gavroche", "value": 1 }, { "source": "Enjolras", "target": "Marius", "value": 7 }, { "source": "Enjolras", "target": "Gavroche", "value": 7 }, { "source": "Enjolras", "target": "Javert", "value": 6 }, { "source": "Enjolras", "target": "Mabeuf", "value": 1 }, { "source": "Enjolras", "target": "Valjean", "value": 4 }, { "source": "Combeferre", "target": "Enjolras", "value": 15 }, { "source": "Combeferre", "target": "Marius", "value": 5 }, { "source": "Combeferre", "target": "Gavroche", "value": 6 }, { "source": "Combeferre", "target": "Mabeuf", "value": 2 }, { "source": "Prouvaire", "target": "Gavroche", "value": 1 }, { "source": "Prouvaire", "target": "Enjolras", "value": 4 }, { "source": "Prouvaire", "target": "Combeferre", "value": 2 }, { "source": "Feuilly", "target": "Gavroche", "value": 2 }, { "source": "Feuilly", "target": "Enjolras", "value": 6 }, { "source": "Feuilly", "target": "Prouvaire", "value": 2 }, { "source": "Feuilly", "target": "Combeferre", "value": 5 }, { "source": "Feuilly", "target": "Mabeuf", "value": 1 }, { "source": "Feuilly", "target": "Marius", "value": 1 }, { "source": "Courfeyrac", "target": "Marius", "value": 9 }, { "source": "Courfeyrac", "target": "Enjolras", "value": 17 }, { "source": "Courfeyrac", "target": "Combeferre", "value": 13 }, { "source": "Courfeyrac", "target": "Gavroche", "value": 7 }, { "source": "Courfeyrac", "target": "Mabeuf", "value": 2 }, { "source": "Courfeyrac", "target": "Eponine", "value": 1 }, { "source": "Courfeyrac", "target": "Feuilly", "value": 6 }, { "source": "Courfeyrac", "target": "Prouvaire", "value": 3 }, { "source": "Bahorel", "target": "Combeferre", "value": 5 }, { "source": "Bahorel", "target": "Gavroche", "value": 5 }, { "source": "Bahorel", "target": "Courfeyrac", "value": 6 }, { "source": "Bahorel", "target": "Mabeuf", "value": 2 }, { "source": "Bahorel", "target": "Enjolras", "value": 4 }, { "source": "Bahorel", "target": "Feuilly", "value": 3 }, { "source": "Bahorel", "target": "Prouvaire", "value": 2 }, { "source": "Bahorel", "target": "Marius", "value": 1 }, { "source": "Bossuet", "target": "Marius", "value": 5 }, { "source": "Bossuet", "target": "Courfeyrac", "value": 12 }, { "source": "Bossuet", "target": "Gavroche", "value": 5 }, { "source": "Bossuet", "target": "Bahorel", "value": 4 }, { "source": "Bossuet", "target": "Enjolras", "value": 10 }, { "source": "Bossuet", "target": "Feuilly", "value": 6 }, { "source": "Bossuet", "target": "Prouvaire", "value": 2 }, { "source": "Bossuet", "target": "Combeferre", "value": 9 }, { "source": "Bossuet", "target": "Mabeuf", "value": 1 }, { "source": "Bossuet", "target": "Valjean", "value": 1 }, { "source": "Joly", "target": "Bahorel", "value": 5 }, { "source": "Joly", "target": "Bossuet", "value": 7 }, { "source": "Joly", "target": "Gavroche", "value": 3 }, { "source": "Joly", "target": "Courfeyrac", "value": 5 }, { "source": "Joly", "target": "Enjolras", "value": 5 }, { "source": "Joly", "target": "Feuilly", "value": 5 }, { "source": "Joly", "target": "Prouvaire", "value": 2 }, { "source": "Joly", "target": "Combeferre", "value": 5 }, { "source": "Joly", "target": "Mabeuf", "value": 1 }, { "source": "Joly", "target": "Marius", "value": 2 }, { "source": "Grantaire", "target": "Bossuet", "value": 3 }, { "source": "Grantaire", "target": "Enjolras", "value": 3 }, { "source": "Grantaire", "target": "Combeferre", "value": 1 }, { "source": "Grantaire", "target": "Courfeyrac", "value": 2 }, { "source": "Grantaire", "target": "Joly", "value": 2 }, { "source": "Grantaire", "target": "Gavroche", "value": 1 }, { "source": "Grantaire", "target": "Bahorel", "value": 1 }, { "source": "Grantaire", "target": "Feuilly", "value": 1 }, { "source": "Grantaire", "target": "Prouvaire", "value": 1 }, { "source": "MotherPlutarch", "target": "Mabeuf", "value": 3 }, { "source": "Gueulemer", "target": "Thenardier", "value": 5 }, { "source": "Gueulemer", "target": "Valjean", "value": 1 }, { "source": "Gueulemer", "target": "Mme.Thenardier", "value": 1 }, { "source": "Gueulemer", "target": "Javert", "value": 1 }, { "source": "Gueulemer", "target": "Gavroche", "value": 1 }, { "source": "Gueulemer", "target": "Eponine", "value": 1 }, { "source": "Babet", "target": "Thenardier", "value": 6 }, { "source": "Babet", "target": "Gueulemer", "value": 6 }, { "source": "Babet", "target": "Valjean", "value": 1 }, { "source": "Babet", "target": "Mme.Thenardier", "value": 1 }, { "source": "Babet", "target": "Javert", "value": 2 }, { "source": "Babet", "target": "Gavroche", "value": 1 }, { "source": "Babet", "target": "Eponine", "value": 1 }, { "source": "Claquesous", "target": "Thenardier", "value": 4 }, { "source": "Claquesous", "target": "Babet", "value": 4 }, { "source": "Claquesous", "target": "Gueulemer", "value": 4 }, { "source": "Claquesous", "target": "Valjean", "value": 1 }, { "source": "Claquesous", "target": "Mme.Thenardier", "value": 1 }, { "source": "Claquesous", "target": "Javert", "value": 1 }, { "source": "Claquesous", "target": "Eponine", "value": 1 }, { "source": "Claquesous", "target": "Enjolras", "value": 1 }, { "source": "Montparnasse", "target": "Javert", "value": 1 }, { "source": "Montparnasse", "target": "Babet", "value": 2 }, { "source": "Montparnasse", "target": "Gueulemer", "value": 2 }, { "source": "Montparnasse", "target": "Claquesous", "value": 2 }, { "source": "Montparnasse", "target": "Valjean", "value": 1 }, { "source": "Montparnasse", "target": "Gavroche", "value": 1 }, { "source": "Montparnasse", "target": "Eponine", "value": 1 }, { "source": "Montparnasse", "target": "Thenardier", "value": 1 }, { "source": "Toussaint", "target": "Cosette", "value": 2 }, { "source": "Toussaint", "target": "Javert", "value": 1 }, { "source": "Toussaint", "target": "Valjean", "value": 1 }, { "source": "Child1", "target": "Gavroche", "value": 2 }, { "source": "Child2", "target": "Gavroche", "value": 2 }, { "source": "Child2", "target": "Child1", "value": 3 }, { "source": "Brujon", "target": "Babet", "value": 3 }, { "source": "Brujon", "target": "Gueulemer", "value": 3 }, { "source": "Brujon", "target": "Thenardier", "value": 3 }, { "source": "Brujon", "target": "Gavroche", "value": 1 }, { "source": "Brujon", "target": "Eponine", "value": 1 }, { "source": "Brujon", "target": "Claquesous", "value": 1 }, { "source": "Brujon", "target": "Montparnasse", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Bossuet", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Joly", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Grantaire", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Bahorel", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Gavroche", "value": 1 }, { "source": "Mme.Hucheloup", "target": "Enjolras", "value": 1 } ]; // CHART CONFIG // ----------------------------- let chartConfig = { type: 'tree', borderWidth: '1px', borderColor: '#999', options: { aspect: 'graph', attractionConstant: 0.7, minLinkWidth: '1px', maxLinkWidth: '5px', minSize: '5px', maxSize: '5px', repulsionConstant: 900, repulsionDistanceFactor: 20, springLength: '50px', textAttr: 'id', weightedNodes: 0, weightedLinks: 0, link: { fastVectorPath: true }, node: { borderWidth: 0, label: { visible: false } }, nodes: { Valjean: { type: 'diamond', borderColor: '#333', borderWidth: '1px', size: '8px' }, Gavroche: { type: 'rpoly6', borderColor: '#333', borderWidth: '1px', size: '8px' }, Javert: { type: 'triangle', borderColor: '#333', borderWidth: '1px', size: '8px' } } }, plotarea: {}, series: chartData }; // RENDER CHART // ----------------------------- zingchart.render({ id: chartId, width: '100%', height: 500, output: 'canvas', data: chartConfig, events: { load: load } }); // CHART EVENTS // ----------------------------- // Remove Valjean removeValjeanBtn.addEventListener('click', function (e) { remove('Valjean'); }); // Remove Gavroche removeGavrocheBtn.addEventListener('click', function (e) { remove('Gavroche'); }); // Remove Javert removeJavertBtn.addEventListener('click', function (e) { remove('Javert'); }); // HELPER FNS // ----------------------------- function load() { controlBar.classList.add('loaded'); } function remove(name) { if (!name) return; // Update chart zingchart.exec(chartId, 'tree.removenode', { id: name }); }
.info { padding:1rem 0 0; min-height:529px; background:#fff; box-sizing:border-box; } .demo-title { margin:0 0 1rem; display:block; text-align:center; font:500 1.125rem/1.3 sans-serif; } .control-bar { margin:0 auto; padding:0 0 1rem; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; } .control-bar.loaded { display:flex !important; opacity:1; } .control-bar > * + * { margin-left:10px; } .control-bar button { min-width:45px; height:40px; cursor:pointer; color:#fff; background:#074361; border:1px solid #074361; border-radius:4px; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .chart--container { min-height: 150px; width: 100%; height: 100%; } .zc-ref { display: none; }