chart = { //TODO: Change value according to preferences let showIp = true; //TODO: define min latency threshold let minLatency = 200; const svg = d3.create('svg') .attr('viewBox', [0, 0,w, 700]) const edgeElements = svg.append('g') .attr('id', 'edges') const nodeElements = svg.append('g') .attr('id', 'nodes') svg.append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', '0 -10 15 15') .attr('refX', 6) .attr('refY', 0) .attr('markerWidth', 15) .attr('markerHeight', 15) .attr('markerUnits', 'userSpaceOnUse') // disable the effect of stroke width on the arrow .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5 L10,0 L0,5Z') .style('fill', '#999'); svg.append('defs') .append('marker') .attr('id', 'arrow_over') .attr('viewBox', '0 -10 15 15') .attr('refX', 6) .attr('refY', 0) .attr('markerWidth', 15) .attr('markerHeight', 15) .attr('markerUnits', 'userSpaceOnUse') // disable the effect of stroke width on the arrow .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5 L10,0 L0,5Z') .style('fill', '#96263a'); return Object.assign(svg.node(), { update(g, nodes, edges, direction) { edgeElements.transition() .duration(delay * 0.75) .attr('transform', `translate(${(w - g.graph().width) * 0.5 - m.x}, 0)`); edgeElements .selectAll('path') .data(edges, d => d.v + d.w) .join( enter => enter.append('path') .attr('d', d => line(d.points)) .attr('marker-end', (d) => { if(d.latency > minLatency) return 'url(#arrow_over)' return 'url(#arrow)'}) .style('stroke', d => { //TODO: define which value determines red latency if(d.latency > minLatency) return "#96263a"; return 'rgba(0, 0, 0, 0.15)'}) .style('stroke-width', d => lineWidth(d.width)) .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attrTween('d', function(d) { return d3.interpolatePath( this.getAttribute('d'), line(d.points) ); }) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ) .on('mouseover', (event, d) => { let prevName = d.v.includes("*")? "*":d.v; let nextName = d.w.includes("*")? "*":d.w; //Tooltip let tipContent = ``; tipContent += ``; tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

Agent	${d.agent}
Latency	${d.latency}
Prev Node	${prevName}
Next Node	${nextName}

`; chartTip.style("left", event.pageX + 50 + "px") .style("top", event.pageY - 50 + "px") .style("display", "inline-block") .html(`Link
${tipContent}`); //Path focus selectPath(d.w); }) .on('mouseout', () => { chartTip.style("display", "none"); // Hide toolTip unselectPath(); }) nodeElements.transition() .duration(delay * 0.75) .attr('transform', `translate(${(w - g.graph().width) * 0.5 - m.x}, 0)`); const currentNodeElements = nodeElements.selectAll('g') .data(nodes, d => d.name) .join( enter => enter.append('g') .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.75) .style('opacity', 0) .remove() ) ) currentNodeElements .selectAll('circle') .data(d => [d], d => d.name) .join('circle') .attr('r', 9) .style('fill', d => d.fill) .on('mouseover', (event , d) => { //Tooltip let tipContent = ``; tipContent += ``; tipContent += `` tipContent += `` tipContent += `` tipContent += `` tipContent += `

IP	${d.ip}
DNS	${d.dns}

`; chartTip.style("left", event.pageX + 50 + "px") .style("top", event.pageY - 50 + "px") .style("display", "inline-block") .html(`Node
${tipContent}`); //Path focus let name = d.name selectPath(name); }) .on('mouseout', () => { chartTip.style("display", "none"); // Hide toolTip unselectPath(); }) //Path focus functions function selectPath(name){ //Select nodes currentNodeElements.selectAll('circle').style('fill', m => { let belongs = false; paths[m.name].map(p => { if(paths[name].includes(p)){ belongs = true; } }) if(belongs) return m.fill; return "gray"; }) edgeElements.selectAll('path') .style('stroke', m=>{ let belongs = false; paths[m.v].map(p => { if(paths[name].includes(p)){ belongs = true; } }) if(belongs){ if(m.latency > minLatency) return "#96263a"; return 'rgba(0, 0, 0, 0.15)' } return "gray" }) .attr('marker-end', m=> { let belongs = false; paths[m.v].map(p => { if(paths[name].includes(p)){ belongs = true; } }) if(belongs){ if(m.latency > minLatency) return 'url(#arrow_over)'; } return 'url(#arrow)'}); } function unselectPath(){ currentNodeElements.selectAll('circle').style('fill', d => d.fill); edgeElements.selectAll('path') .style('stroke', d=> { if(d.latency > minLatency) return "#96263a"; return 'rgba(0, 0, 0, 0.15)'}) .attr('marker-end', (d) => { if(d.latency > minLatency) return 'url(#arrow_over)' return 'url(#arrow)'}); } //Agent Name currentNodeElements .selectAll('text.agent') .data(d => [d], d => d.agent) .join( enter => enter.append('text') .attr("class", "agent") .text(d => d.agent.includes("_")?" ":d.agent) .attr('text-anchor', 'middle') .attr('dy', 30) .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round'), update => update.call( update => update.transition() .duration(delay * 0.75) .attr('dy', 40) ) ); if(showIp){ currentNodeElements .selectAll('text.ip') .data(d => [d], d => d.name) .join( enter => enter.append('text') .attr("class", "ip") .text(d => d.name.includes("*")?"*":d.name) .attr('text-anchor', 'middle') .attr('dy', -15 + (direction == 'TB') * 2) .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round'), update => update.call( update => update.transition() .duration(delay * 0.75) .attr('dy', -10 + (direction == 'TB') * 2) ) ); } return svg.node() } }); }