Skip to content
Snippets Groups Projects
Commit 01cfebdf authored by Leander's avatar Leander
Browse files

fix: nodes are assigned to the wrong group

parent a6a65a6e
No related branches found
No related tags found
No related merge requests found
...@@ -102,7 +102,7 @@ export default class BubbleChart extends SearchableChart { ...@@ -102,7 +102,7 @@ export default class BubbleChart extends SearchableChart {
const node = vis.chart const node = vis.chart
.selectAll("g") .selectAll("g")
.data(vis.packRoot?.descendants()) .data(vis.packRoot?.leaves())
.join( .join(
(enter: any) => enter.append("g"), (enter: any) => enter.append("g"),
(update: any) => update (update: any) => update
...@@ -113,6 +113,7 @@ export default class BubbleChart extends SearchableChart { ...@@ -113,6 +113,7 @@ export default class BubbleChart extends SearchableChart {
) )
node.selectAll('circle') node.selectAll('circle')
.data((d: any) => [d])
.transition() .transition()
.duration(1000) .duration(1000)
.attr('fill', (d: any) => vis.getFillForNode(d)) .attr('fill', (d: any) => vis.getFillForNode(d))
...@@ -126,16 +127,13 @@ export default class BubbleChart extends SearchableChart { ...@@ -126,16 +127,13 @@ export default class BubbleChart extends SearchableChart {
const node = vis.chart const node = vis.chart
.selectAll("g") .selectAll("g")
.data(vis.packRoot?.descendants()) .data(vis.packRoot?.leaves())
.join("g") .join("g")
.attr("transform", (d: any) => `translate(${d.x},${d.y})`) .attr("transform", (d: any) => `translate(${d.x},${d.y})`)
node node
.filter((d: any) => !d.children)
.append('circle') .append('circle')
.attr('fill', (d: any) => vis.getFillForNode(d)) .attr('fill', (d: any) => vis.getFillForNode(d))
.attr('stroke', 'none')
.attr('stroke-width', 2)
.attr('r', (d: any) => d.r) .attr('r', (d: any) => d.r)
.attr('data-player', (d: any) => d.data.player) .attr('data-player', (d: any) => d.data.player)
.on('mouseover', (_: Event, d: any) => { .on('mouseover', (_: Event, d: any) => {
...@@ -181,7 +179,9 @@ export default class BubbleChart extends SearchableChart { ...@@ -181,7 +179,9 @@ export default class BubbleChart extends SearchableChart {
( (
(d3.hierarchy(groupedData) as HierarchyNode<any>) (d3.hierarchy(groupedData) as HierarchyNode<any>)
.sum((d: any) => this.config.sizeAccessor(d)) .sum((d: any) => this.config.sizeAccessor(d))
.sort((d: any) => this.config.sizeAccessor(d))
) )
} }
private getFillForNode(node: HierarchyNode<any>) { private getFillForNode(node: HierarchyNode<any>) {
......
...@@ -38,7 +38,7 @@ dsv(';', 'data/output.csv').then(data => { ...@@ -38,7 +38,7 @@ dsv(';', 'data/output.csv').then(data => {
if (sliderBlocked) return if (sliderBlocked) return
zoomSlider.value = event.transform.k.toString() zoomSlider.value = event.transform.k.toString()
}, },
groupAccessor: (d: any) => d['team'], groupAccessor: (d: any) => d['nation'],
}) })
bubbleChart.renderVis() bubbleChart.renderVis()
......
...@@ -71,6 +71,7 @@ h1 { ...@@ -71,6 +71,7 @@ h1 {
border-radius: 8px; border-radius: 8px;
border: 1px solid #ccc; border: 1px solid #ccc;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
user-select: none;
} }
#app { #app {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment