Built with blockbuilder.org
xxxxxxxxxx<head><meta charset="utf-8"><script src="https://d3js.org/d3.v3.min.js"></script></head><body> <script> var img = new Image();var width,height; img.onload = function(){ width=img.naturalWidth ; height=img.naturalHeight ;};img.src = "https://loveice622.github.io/11-50-56.jpg"; width =1261 height=4025var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height);svg.append("image") .attr("x",0).attr("y",0) .attr("width", width) .attr("height", height) .attr("xlink:href", "https://loveice622.github.io/11-50-56.jpg");d3.csv("1.csv", function(d){ for(i = 1; i < d.length; i ++) { d[i].delay=Number(d[i].TimeStamp)-Number(d[0].TimeStamp) d[i].label=i.toString() if (i<d.length-1) { var r r=(Number(d[i+1].TimeStamp)-Number(d[i].TimeStamp))*0.3 if(r<1) d[i].r=1 else d[i].r=r //console.log(i,d[i].r, d[i].delay) } if(i < d.length-1){ svg.append("line") .attr("x1", Number(d[i].x)) .attr("y1", Number(d[i].y)) .attr("x2", Number(d[i+1].x)) .attr("y2", Number(d[i+1].y)) .style("stroke", "#8da0cb") .style("stroke-width", 0) .transition() .delay(d[i].delay) .duration(2000) .style('stroke-width', 2) svg.append("line") .attr("x1", Number(d[i].mouseX)) .attr("y1", Number(d[i].mouseY)) .attr("x2", Number(d[i+1].mouseX)) .attr("y2", Number(d[i+1].mouseY)) .style("stroke", "#8da0cb") .style("stroke-width", 0) .transition() .delay(d[i].delay) .duration(2000) .style('stroke-width', 2) svg.append("circle") .attr("cx", Number(d[i].mouseX)) .attr("cy", Number(d[i].mouseY)) .attr("r",0) .style("fill", "Lime") .style("opacity", 0.4) .transition() .delay(d[i].delay) .duration(2000) .attr('r', d[i].r) .style('opacity', 50) svg.append("circle") .attr("cx", Number(d[i].x)) .attr("cy", Number(d[i].y)) .attr("r", 0) .style("fill", "red") .style("opacity", 0.4) .transition() .delay(d[i].delay) .duration(2000) .attr('r', d[i].r) .style('opacity', 50) svg.append("text") .attr("x", Number(d[i].x-5)) .attr("y", Number(d[i].y+5)) .transition() .delay(d[i].delay) .duration(2000) .text(d[i].label) svg.append("text") .attr("x", Number(d[i].mouseX)) .attr("y", Number(d[i].mouseY)) .transition() .delay(d[i].delay) .duration(2000) .text(d[i].label) } } // var pulseCircles = svg.selectAll('circle')// .data(d)// .transition()// .delay(d=>d.delay)// .duration(2000)// .attr('r', d=>d.r)// .style('opacity', 50) })</script></body> https://d3js.org/d3.v3.min.js