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 =1247 height=604var 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://user-images.githubusercontent.com/25095189/32782796-8f3e2c28-c917-11e7-9b66-8acf0156e74b.jpg");d3.csv("1.csv", function(d){ for(i = 0; i < d.length; i ++) { d[i].delay=Number(d[i].TimeStamp)-Number(d[0].TimeStamp) if (i<d.length-1) { d[i].r=(Number(d[i+1].TimeStamp)-Number(d[i].TimeStamp))*0.3 } 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) if(i < d.length-1){ 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) } } var pulseCircles = svg.selectAll('circle') .data(d) .transition() .delay(d=>d.delay) .duration(2000) .attr('r', 10) .style('opacity', 50) })</script></body> https://d3js.org/d3.v3.min.js