Làm thế nào để vẽ một con đường thông suốt từ điểm đầu đến điểm kết thúc trong D3.js

Question

Tôi đã đoạn mã sau đó âm mưu một con đường dòng dựa trên chức năng sin:

var data = d3.range(40).map(function(i) { 
    return {x: i/39, y: (Math.sin(i/3) + 2)/4}; 
}); 

var margin = {top: 10, right: 10, bottom: 20, left: 40}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var x = d3.scale.linear() 
    .domain([0, 1]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, 1]) 
    .range([height, 0]); 


var line = d3.svg.line() 
      .interpolate('linear') 
      .x(function(d){ return x(d.x) }) 
      .y(function(d){ return y(d.y) }); 

var svg = d3.select("body").append("svg") 
    .datum(data) 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

svg.append("path") 
    .attr("class", "line") 
    .attr("d", line); 

svg.selectAll('.point') 
    .data(data) 
    .enter().append("svg:circle") 
    .attr("cx", function(d, i){ return x(d.x)}) 
    .attr("cy", function(d, i){ return y(d.y)}) 
    .attr('r', 4); 

Những gì tôi muốn làm là để vẽ nó thông suốt từ nút đầu tiên đến nút cuối cùng. Tôi cũng muốn có một sự chuyển tiếp suôn sẻ giữa hai nút liên tiếp và không chỉ đặt toàn bộ dòng cùng một lúc. Đơn giản chỉ cần kết nối các dấu chấm bằng bút chì.

Mọi trợ giúp sẽ thực sự được đánh giá cao.

Answer 1

Bạn có thể làm động con đường khá dễ dàng với stroke-dashoffset và and path.getTotalLength()

var totalLength = path.node().getTotalLength(); 

path 
    .attr("stroke-dasharray", totalLength + " " + totalLength) 
    .attr("stroke-dashoffset", totalLength) 
    .transition() 
    .duration(2000) 
    .ease("linear") 
    .attr("stroke-dashoffset", 0); 

http://bl.ocks.org/4063326