From 01cfebdf0aa70ab046897a89deb7ce668dbc4df6 Mon Sep 17 00:00:00 2001 From: Leander <leander.gerwing@gmail.com> Date: Sun, 28 Jul 2024 03:26:23 +0200 Subject: [PATCH] fix: nodes are assigned to the wrong group --- src/charts/bubbleChart.ts | 10 +++++----- src/main.ts | 2 +- src/styles/index.scss | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/charts/bubbleChart.ts b/src/charts/bubbleChart.ts index 30b11f0..e599d0a 100644 --- a/src/charts/bubbleChart.ts +++ b/src/charts/bubbleChart.ts @@ -102,7 +102,7 @@ export default class BubbleChart extends SearchableChart { const node = vis.chart .selectAll("g") - .data(vis.packRoot?.descendants()) + .data(vis.packRoot?.leaves()) .join( (enter: any) => enter.append("g"), (update: any) => update @@ -113,6 +113,7 @@ export default class BubbleChart extends SearchableChart { ) node.selectAll('circle') + .data((d: any) => [d]) .transition() .duration(1000) .attr('fill', (d: any) => vis.getFillForNode(d)) @@ -126,16 +127,13 @@ export default class BubbleChart extends SearchableChart { const node = vis.chart .selectAll("g") - .data(vis.packRoot?.descendants()) + .data(vis.packRoot?.leaves()) .join("g") .attr("transform", (d: any) => `translate(${d.x},${d.y})`) node - .filter((d: any) => !d.children) .append('circle') .attr('fill', (d: any) => vis.getFillForNode(d)) - .attr('stroke', 'none') - .attr('stroke-width', 2) .attr('r', (d: any) => d.r) .attr('data-player', (d: any) => d.data.player) .on('mouseover', (_: Event, d: any) => { @@ -181,7 +179,9 @@ export default class BubbleChart extends SearchableChart { ( (d3.hierarchy(groupedData) as HierarchyNode<any>) .sum((d: any) => this.config.sizeAccessor(d)) + .sort((d: any) => this.config.sizeAccessor(d)) ) + } private getFillForNode(node: HierarchyNode<any>) { diff --git a/src/main.ts b/src/main.ts index 3f78f39..de991fb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -38,7 +38,7 @@ dsv(';', 'data/output.csv').then(data => { if (sliderBlocked) return zoomSlider.value = event.transform.k.toString() }, - groupAccessor: (d: any) => d['team'], + groupAccessor: (d: any) => d['nation'], }) bubbleChart.renderVis() diff --git a/src/styles/index.scss b/src/styles/index.scss index 1b73854..12e6907 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -71,6 +71,7 @@ h1 { border-radius: 8px; border: 1px solid #ccc; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); + user-select: none; } #app { -- GitLab