~~~ <script type="text/javascript" src="api/d3.js"></script> <script type="text/javascript"> //向body標簽增加svg子元素 var svg = d3.select('body') .append('svg') .attr({ "width": 700, "height": 500, }); //默認數據結構 var array = [ [100, 100], [150, 150], [200, 100], [250, 150], [300, 100], [350, 150] ]; //構造默認線性生成器 var line = d3.svg.line(); line.interpolate("basis") //增加折線 var area = d3.svg.area() .y0(600); //基線 Draw() function Draw(type_) { if (!type_ || type_ == "line") { type_ = "line" chart_ = line }else{ chart_ = area; } var path_ = svg.selectAll(".chart").data([array]); path_.enter() .append('path') .attr({ "class":"chart", "transform": "translate(0,0)" }) .style({ // "stroke": "steelblue", "stroke-width": 5, // "fill": "while" }) .each(function() { this._current = "#fff"//[array[0], array[0]] }); path_ .transition() .duration(2000) .attrTween("stroke",function(d) { if (type_ == "area") { var color = d3.interpolate(this._current,"steelblue"); return function(t) { return color(t) } } else { var color = d3.interpolate(this._current,"steelblue"); return function(t) { return color(t) } } }) .attrTween("fill",function(d) { if (type_ == "area") { var color = d3.interpolate(this._current,"steelblue"); return function(t) { return color(t) } } else { var color = d3.interpolate(this._current,"#fff"); return function(t) { return color(t) } } }) .attrTween("d", function(d) { return lineTween.call(this, array) }) function lineTween(b) { var num = array.length; var arr_ = []; for(var i = 0; i <= num; i++) { arr_.push(1 / num * i) } return function(t) { var i = 0 while(arr_[i] < t) { i++; } var new_arr = interpolateArrays(i, t) function interpolateArrays(index, time, array) { index--; if(!array) array = b; var fixed_arr = array.slice(0, index); var current_arr = array.slice(index, index + 2); var line_interpolate = d3.interpolate([current_arr[0], current_arr[0]], current_arr); /** * time分段換算 */ var r = arr_.slice(index, index + 2) var scale = d3.scale.linear() .domain(r) .range([0, 1]); var slice_arr = line_interpolate(scale(t)); return d3.merge([fixed_arr, slice_arr]) } return chart_(new_arr) // return i(t); } } } </script> ~~~