diff --git a/src/charts/bubbleChart.ts b/src/charts/bubbleChart.ts index 30b11f08e53e9494bd411360427c96527d5e61b4..e599d0ad4de75b30d695e44fc65bdc3dc6ce0205 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 3f78f397f31fd2c213d94231abb610d7dded66a5..de991fb59dd0a5fbc8a4ea160965f58916c2c160 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 1b73854f3a71bce6c7c474e3b35a388dadb7fb0a..12e690781c31774297ec960b2429941dba3b5551 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 {