diff --git a/js/entity-mesh.js b/js/entity-mesh.js index b10029fc2728185e61cb295dcd159d1679fec995..b3d486bfeb19becdb512d2ad6d04a6bcf31da504 100644 --- a/js/entity-mesh.js +++ b/js/entity-mesh.js @@ -27,6 +27,17 @@ function graphGenerate(data, settings) { links = data.links; types = data.types; + // Calculate the total number of nodes for each type: + const typesTotal = Object.values( + nodes.reduce((acc, item) => { + if (!acc[item.type]) { + acc[item.type] = { name: item.type, total: 0 }; + } + acc[item.type].total += 1; + return acc; + }, {}) + ).sort((a, b) => a.name.localeCompare(b.name)); + // Init Graph: let graph = document.querySelector(selector); let width = window.innerWidth - 100; @@ -204,7 +215,7 @@ function graphGenerate(data, settings) { .attr("transform", "translate(20, 20)"); let legendItems = legend.selectAll(".legend-item") - .data(types) + .data(typesTotal) .enter() .append("g") .attr("x", 20) @@ -215,19 +226,20 @@ function graphGenerate(data, settings) { legendItems.append("rect") .attr("width", 10) .attr("height", 10) - .style("fill", d => color(d)); + .style("fill", d => color(d.name)); legendItems.append("text") .attr("x", 20) .attr("y", 10) - .text(d => d) + .text(d => d.name + " (" + d.total + ")") .on('click', toggleLegends); function toggleLegends(event, clickedLegend) { - const index = filterTypes.indexOf(clickedLegend); + const index = filterTypes.indexOf(clickedLegend.name); + if (index === -1) { - filterTypes.push(clickedLegend); + filterTypes.push(clickedLegend.name); d3.select(event.currentTarget).classed('selected', true); } else {