diff --git a/js/diagram.js b/js/diagram.js index 9882aed..c4a3ec4 100644 --- a/js/diagram.js +++ b/js/diagram.js @@ -36,6 +36,56 @@ const Diagram = { chords.groups[ii].endAngle += offsetAngle; } + chords.forEach(v => { + if (v.source.index === f) { + v.source.startAngle += (snd.endAngle - fst.endAngle); + v.source.endAngle += (snd.endAngle - fst.endAngle); + } + + if (v.target.index === f) { + v.target.startAngle += (snd.endAngle - fst.endAngle); + v.target.endAngle += (snd.endAngle - fst.endAngle); + } + + if (v.source.index === s) { + v.source.startAngle -= (snd.startAngle - fst.startAngle); + v.source.endAngle -= (snd.startAngle - fst.startAngle); + } + + if (v.target.index === s) { + v.target.startAngle -= (snd.startAngle - fst.startAngle); + v.target.endAngle -= (snd.startAngle - fst.startAngle); + } + + if (v.source.index > f && v.source.index < s) { + v.source.startAngle += offsetAngle; + v.source.endAngle += offsetAngle; + } + + if (v.target.index > f && v.target.index < s) { + v.target.startAngle += offsetAngle; + v.target.endAngle += offsetAngle; + } + + if ((v.source.index === f || v.source.index === s) && (v.target.index === f || v.target.index === s)) { + const tmp = v.source.index; + v.source.index = v.target.index; + v.target.index = tmp; + } + else if (v.source.index === f) { + v.source.index = s; + } + else if (v.target.index === f) { + v.target.index = s; + } + else if (v.source.index === s) { + v.source.index = f; + } + else if (v.target.index === s) { + v.target.index = f; + } + }); + // Swap array positions. const tmp = chords.groups[f] chords.groups[f] = chords.groups[s]; @@ -51,55 +101,23 @@ const Diagram = { }, getCountryName: (data, eventIndex, n) => { - const countryId = data.teams[data.tourneys[eventIndex].teams[n]]; - return data.countries[countryId].n; + const team = data.tourneys[eventIndex].teams[n]; + return data.countries[team.cId]; }, getPopulation: (data, eventIndex, n) => { - const teamId = data.tourneys[eventIndex].teams[n]; - return data.countries[data.teams[teamId]].p; + const team = data.tourneys[eventIndex].teams[n]; + return team.p; }, getGoalsFor: (data, eventIndex, n) => { - const teamId = data.tourneys[eventIndex].teams[n]; - - if (goalsFor[teamId] === undefined) { - goalsFor[teamId] = data.tourneys[eventIndex].games.reduce((acc, v) => { - - if (v.t1 === teamId) { - return acc + v.s1 + v.se1 + v.sp1; - } - - if (v.t2 === teamId) { - return acc + v.s2 + v.se2 + v.sp2; - } - - return acc; - }, 0); - } - - return goalsFor[teamId]; + const team = data.tourneys[eventIndex].teams[n]; + return team.ga; }, getGoalsAgainst: (data, eventIndex, n) => { - const teamId = data.tourneys[eventIndex].teams[n]; - - if (goalsAgainst[teamId] === undefined) { - goalsAgainst[teamId] = data.tourneys[eventIndex].games.reduce((acc, v) => { - - if (v.t2 === teamId) { - return acc + v.s1 + v.se1 + v.sp1; - } - - if (v.t1 === teamId) { - return acc + v.s2 + v.se2 + v.sp2; - } - - return acc; - }, 0); - } - - return goalsAgainst[teamId]; + const team = data.tourneys[eventIndex].teams[n]; + return team.gf; }, build: (data, eventIndex, matrix) => { @@ -114,13 +132,19 @@ const Diagram = { .padAngle(0.05) .call(null, matrix); - const sortedChords = chords; - // const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1, + const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1, // Diagram.getCountryName.bind(null, data, eventIndex), // Diagram.getGoalsFor.bind(null, data, eventIndex), - // Diagram.getGoalsAgainst.bind(null, data, eventIndex), + Diagram.getGoalsAgainst.bind(null, data, eventIndex), // Diagram.getPopulation.bind(null, data, eventIndex), - // Diagram.swapGroups.bind(null, data, eventIndex)); + Diagram.swapGroups.bind(null, data, eventIndex)); + + // const sortedChords = chords; + // let sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 10); + // sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 8); + // [ Romania, Belgium, Serbia, France, US, Mexico, Paraguay, Peru, Uruguay, Chile, Bolivia, Brazil, Argentina ] + // PROBLEMS: 2-8, 2-10, 2-11 + const arc = d3.arc() .innerRadius(innerRadius) @@ -157,34 +181,36 @@ const Diagram = { .style("stroke", d => d3.rgb(color(d.index)).darker()) .attr("d", arc); - // g.append("g") - // .attr("class", "ribbons") - // .selectAll("path") - // .data(function(chords) { return chords; }) - // .enter().append("path") - // .attr("d", ribbon) - // .style("fill", function(d) { return color(d.target.index); }) - // .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); }) - // .attr("class", "ribbon") - // // .append("title") - // // .text(function(d) { - // // const meta1 = metaMatrix[d.target.index][d.source.index]; - // // const meta2 = metaMatrix[d.source.index][d.target.index]; - // // - // // const g = meta1.game; - // // - // // const t1 = lookup.teams[g.t1]; - // // const t2 = lookup.teams[g.t2]; - // // - // // const e1 = g.s1e ? `(+${g.s1e} in extended time)` : ''; - // // const e2 = g.s2e ? `(+${g.s2e} in extended time)` : ''; - // // - // // const p1 = g.s1p ? `(+${g.s1p} in penalties)` : ''; - // // const p2 = g.s2p ? `(+${g.s2p} in penalties)` : ''; - // // - // // return `${t1}: ${g.s1} ${e1} ${p1}\n${t2}: ${g.s2} ${e2} ${p2}`; - // // }); - // + g.append("g") + .attr("class", "ribbons") + .selectAll("path") + .data(function(chords) { return chords; }) + .enter().append("path") + .attr("d", ribbon) + .style("fill", function(d) { return color(d.target.index); }) + .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); }) + .attr("class", "ribbon") + .append("title") + .text(function(d) { + const t1 = data.tourneys[eventIndex].teams[d.source.index]; + const t2 = data.tourneys[eventIndex].teams[d.target.index]; + + const c1 = data.countries[t1.cId]; + const c2 = data.countries[t2.cId]; + + const game = data.tourneys[eventIndex].games.find(v => { + return (v.t1 === t1.tId || v.t1 === t2.tId) && (v.t2 === t1.tId || v.t2 === t2.tId); + }); + + const e1 = game.se1 ? `(+${game.se1} in extended time)` : ''; + const e2 = game.se2 ? `(+${game.se2} in extended time)` : ''; + + const p1 = game.sp1 ? `(+${game.sp1} in penalties)` : ''; + const p2 = game.sp2 ? `(+${game.sp2} in penalties)` : ''; + + return `${c1}: ${game.s1} ${e1} ${p1}\n${c2}: ${game.s2} ${e2} ${p2}`; + }); + group.append("text") .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; }) .attr("dy", ".35em") @@ -195,7 +221,7 @@ const Diagram = { }) .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) .text(function(d) { - // STRANGE EXTENDED TIME CHILE-BRAZIL - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME + // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME const team = data.tourneys[eventIndex].teams[d.index]; const country = data.countries[team.cId];