svg 下aminate image

需求：人員的頭像可以按軌跡運動，並將運動軌跡逐漸動態顯示

實現：CSS3 animation的支持和svg 的animateMotion

css:  整個運動軌跡30s完成

附：若不添加"linear" 屬性，當path路徑重複時，動態路徑不會重複，這樣會造成圖像運動的路徑和path運動路徑不同。若要按照原來的所有路徑運動並保持圖像和path路徑一致，則必須加此屬性。

    path{
        animation: dash 30s linear infinite;
    }

	@keyframes dash {
		to {
			stroke-dashoffset: 0;
		}
	}

js:

1 每個節點是一個圓點，所有的數據來源是dataset1

			svg.selectAll("circle")
				.data(dataset1)
				.enter()
				.append("circle")
				.attr("transform", "translate(" + padding.left + "," + padding.top + ")")
				.style('fill',"red")
				.style("stroke","black")
				.style("stroke-width","1px")
				.attr("cx", function(d, i) {
					if (i == 0) {
						// x0 = Math.round(d.x / rate);
						// y0 = Math.round(d.y / rate);
						photoUrl = d.photoUrl
					}
					return Math.round(d.x / rate);
				})
				.attr("cy", function(d, i) {
					return Math.round(d.y / rate);
				})
				.attr('r', function() {
					return 3;
				})

2 動態生成路徑

			var paths = document.querySelectorAll('path');
			[].forEach.call(paths, function(path) {
				// Make line to animate
				var length = path.getTotalLength() + 10;
				path.setAttribute('stroke-dasharray', length);
				path.setAttribute('stroke-dashoffset', length);

			})

3 image的動態軌跡

附：1. motion.beginElement()必須添加，若不添加，圖片不會顯示也不會運動。

       2. .attr('x', -15), 此時圖像大小爲30px，表示把圖像向左偏移15px,因爲默認是以圖像的左上角爲起始點。

			var pathData = document.querySelectorAll('path')[0].getAttribute('d');
			// Draw image
			svg.append("image")
				.attr("xlink:href", photoUrl)
				.attr('x',"-15")
				.attr('y',"-15")
				.attr("id", "cop")
				.style('width',"30")

			// Animate image
			var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
			motion.setAttribute("begin", "0s");
			motion.setAttribute("dur", "30s");
			motion.setAttribute("x", "30");
			motion.setAttribute("y", "30");
			motion.setAttribute("repeatCount", "indefinite");
			motion.setAttribute("path", pathData);
			document.getElementById("cop").appendChild(motion);	
			motion.beginElement(); 

4 添加當鼠標移動到節點時，顯示圖像和時間，移開鼠標，圖像時間消失

			svg.selectAll("circle")
				.on("mouseover",function(d,i){
					svg.append("image")
							.attr("xlink:href", d.photoUrl)
							.attr('x',(Math.round(d.x/rate)))
							.attr('y',(Math.round(d.y/rate)))
							.attr('id', "overImgId")
							.style('width',"30")
					svg.append('text')
						.style('fill',function(d,i){
							return colors[i];
						})
						.style('font-size',"0.8em")
						.attr('x',(Math.round(d.x/rate)) + 30)
						.attr('y',(Math.round(d.y/rate)) +20)
						.attr('id', "overTextId")
						.attr('transform',"translate("+padding.left+","+padding.top+")")
						.text(d.name + " on " + msToDate(d.timeSec *1000));
				})
				.on("mouseout",function(d,i){
					d3.select("#overImgId").remove();
					d3.select("#overTextId").remove();
				});

動態效果圖

參考：https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/