drawLine = svg => { let data = parseToData(info); let global = globalDatasetFunc(info); let yScale = d3.scaleLinear() .domain(d3.extent(global, d => d.score)) .range([height - margin.bottom, margin.top]) .nice(); let xScale = d3.scaleTime() .domain(d3.extent(global, d => d.timestamp)) .rangeRound([margin.left, width - margin.right]); let lineFunc = d3.line() .curve(d3.curveLinear) .x(d => xScale(d.timestamp)) .y(d => yScale(d.score)); let axisY = svg.append("g") .call(d3.axisLeft(yScale) .tickFormat(d3.timeFormat("%Y-%m-%d %H:%M"))) .attr("transform", "translate( " + margin.left + ", 0 )"); let axisX = svg.append("g") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(d3.axisBottom(xScale)); d3.selectAll(".aux_tooltip").remove(); let center = l => { if (l.length == 0) { return 0; } else if (l.length == 1) { return l[0].x; } let sum = l[0].x + l[l.length - 1].x; return sum / 2; }; let computeMedianIndex = l => { let c = center(l); for (let i = 0; i < l.length; i++) { if (l[i].x > c) { return i; } } return 1; }; let cluster = (l, vitalMargin) => { if (l.length <= 1) { return l; } let medianIndex = computeMedianIndex(l); let left = l.slice(0, medianIndex); let right = l.slice(medianIndex); let leftCenter = center(left); let rightCenter = center(right); if (rightCenter - leftCenter < vitalMargin) { return [l]; } return [cluster(left, vitalMargin), cluster(right, vitalMargin)]; }; let flatten = l => { let f = []; for (let i = 0; i < l.length; i++) { if (l[i][0].x !== undefined) { f.push(l[i]); } else { let aux = flatten(l[i]); for (let j = 0; j < aux.length; j++) { f.push(aux[j]); } } } return f; }; let points = data.map(t => { return { x: yScale(t.values[t.values.length - 1].score), score: t.values[t.values.length - 1].score, d: t } }) points = points.sort(function (a, b) { return a.x - b.x }); let clusters = []; if (points.length <= 1) { clusters = [points] } else { clusters = flatten(cluster(points, 40)); } let absoluteTopPosition = svg.node().getBoundingClientRect().y clusters.forEach(c => { if (c.length === 1) { let tooltip = d3.select("#tooltip" + c[0].d.team.replace(/ /g, '')) tooltip.style("opacity", "1") tooltip.style("top", absoluteTopPosition + c[0].x - 15 + "px"); tooltip.select("#tooltip-text").html(d => "

" + d + ": " + c[0].score.toFixed(4) + "

") tooltip.select("#pointer").style("background", d => colors(d)); } else { c.map(subC => { let tooltip = d3.select("#tooltip" + subC.d.team.replace(/ /g, '')) tooltip.style("opacity", "0") }) let legend = c.map(subC => { let color = colors(subC.d.team); let content = "

" + "

" + subC.d.team + ": " + subC.score.toFixed(4) + "

" + "

" return content; }).join(""); let auxTooltip = creatAuxTooltip(); auxTooltip.select("#tooltip-text").html(legend) let auxTooltipHalfHeight = auxTooltip.node().getBoundingClientRect().height / 2; auxTooltip.style("top", absoluteTopPosition - auxTooltipHalfHeight + (yScale(center(c.map(d => { return { x: d.score } })))) + "px"); } }) axisY.call(d3.axisLeft(yScale)) axisX.call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%A %H:%M")).ticks(5)) let lineSelect = svg .selectAll(".lines") .data(data); let group = lineSelect.enter().append("g").attr("class", "lines").merge(lineSelect); let pathGroup = group .selectAll("path") .data(d => [d]); let m = pathGroup .enter() .append("path") .attr("stroke", (d) => colors(d.team)) .attr("stroke-width", "1") .attr("fill", "none") .merge(pathGroup) .attr("d", d => lineFunc(d.values)) .attr("transform", null) let circleGroup = group .selectAll(".circle") .data(d => d.values); circleGroup .enter() .append("circle") .attr("class", "circle") .attr("cx", d => xScale(d.timestamp)) .attr("cy", d => yScale(d.score)) .attr("r", 3) .attr("fill", (d, i, nodes) => { let team = d3.select(nodes[i].parentNode).datum().team; return colors(team); }) .merge(circleGroup) .attr("cx", d => xScale(d.timestamp)) .attr("cy", d => yScale(d.score)); }