diff --git a/src/charts/radarChart.ts b/src/charts/radarChart.ts index 1762401fe86c513dac0431b059c277d0547b7e0d..499182234fd2460f034cf4ab3369e646bc7f87d9 100644 --- a/src/charts/radarChart.ts +++ b/src/charts/radarChart.ts @@ -6,6 +6,7 @@ export type RadarChartConfig = ChartConfig & { selectedData: RadarChartSelection[], renderTooltip?: (dataPoint: any, tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>) => void, axisCircles: number, + idAccessor: (d: any) => any, attributes: { key: string, label: string }[] | [], } @@ -50,6 +51,7 @@ export default class RadarChart extends Chart { axisCircles: _config.axisCircles || 2, selectedData: _config.selectedData || [], attributes: _config.attributes || [], + idAccessor: _config.idAccessor || (() => null), } } @@ -155,7 +157,7 @@ export default class RadarChart extends Chart { const preparedData = this.getPreparedData() dataWrapper.selectAll('.data') - .data(preparedData) + .data(preparedData, (d: any) => this.config.idAccessor(d.data)) .join( (enter: any) => { const data = enter.append("g") diff --git a/src/main.ts b/src/main.ts index ee7c2944ac51aecd0fdf1866e6bd9e90052e915a..480ab06733e2d29669fc1f7a58761f71879c8227 100644 --- a/src/main.ts +++ b/src/main.ts @@ -59,7 +59,7 @@ sizeBySetting.oninput = (event) => { bubbleChart.updateVisConfig({sizeAccessor: (d: any) => d[event.target?.value] ?? 0} as BubbleChartConfigParam) } } -const selectedNodes: (Player & { _color: string })[] = [] +const selectedNodes: (Player & { _color: string})[] = [] dsv(';', 'data/output.csv').then(data => { parsedData = data.map((d: any) => { @@ -131,9 +131,10 @@ function updateSelectedNodes(node: Player) { if (selectedNodes.some(n => n.player === node.player)) { selectedNodes.splice(selectedNodes.findIndex((n: Player) => n.player === node.player), 1) } else { + const missingColor = schemeTableau10.find((color) => selectedNodes.findIndex(n => n._color === color) === -1) selectedNodes.push({ ...node, - _color: schemeTableau10[selectedNodes.length] + _color: missingColor ?? schemeTableau10[selectedNodes.length], }) } bubbleChart?.updateSelectedNodes(selectedNodes) @@ -145,6 +146,7 @@ function updateSelectedNodes(node: Player) { containerHeight: 750, margin: {top: 20, right: 20, bottom: 20, left: 20}, axisCircles: 2, + idAccessor: (d: any) => d.player, attributes: [ { key: 'Performance _ G+A',