Không thể làm cho các đường dẫn vẽ chậm dần với D3

Question

Sử dụng thư viện đồ họa d3, tôi dường như không thể vẽ đường đi chậm để chúng có thể được nhìn thấy ngày càng tăng.

This site có ví dụ hoàn hảo trong phần "Biểu đồ đường kẻ (Bỏ lưu trữ)", nhưng không có mã nào được cung cấp cho phần đó. Ai đó có thể giúp tôi với các dòng mã D3 mà có thể làm cho điều đó xảy ra?

Khi tôi thử thêm trễ() hoặc thời lượng() chẳng hạn như trong đoạn mã sau, đường dẫn vẫn vẽ ngay lập tức và tất cả mã SVG sau phân đoạn này không hiển thị.

var mpath = svg.append ('path'); 
     mpath.attr ('d', 'M35 48 L22 48 L22 35 L22 22 L35 22 L35 35 L48 35 L48 48') 
      .attr ('fill', 'none') 
      .attr ('stroke', 'blue') 
      .duration (1000); 

Answer 1

Tôi tin rằng "Cách D3" để làm điều này là với chức năng tùy chỉnh tween. Bạn có thể thấy một thực hiện làm việc ở đây: http://jsfiddle.net/nrabinowitz/XytnD/

này giả định rằng bạn có một máy phát điện gọi là line thiết lập với d3.svg.line để tính toán đường dẫn:

// add element and transition in 
var path = svg.append('path') 
    .attr('class', 'line') 
    .attr('d', line(data[0])) 
    .transition() 
    .duration(1000) 
    .attrTween('d', pathTween); 

function pathTween() { 
    var interpolate = d3.scale.quantile() 
      .domain([0,1]) 
      .range(d3.range(1, data.length + 1)); 
    return function(t) { 
     return line(data.slice(0, interpolate(t))); 
    }; 
}​ 

Chức năng pathTween đây trả về một người xen vào mà phải mất một lát cho của dòng, được xác định bởi khoảng cách chúng ta đang trải qua quá trình chuyển đổi và cập nhật đường dẫn tương ứng. Tuy nhiên, điều đáng chú ý là tôi nghi ngờ bạn sẽ có hiệu suất tốt hơn và hoạt hình mượt mà hơn bằng cách lấy tuyến đường dễ dàng: đặt hình chữ nhật màu trắng (nếu nền của bạn đơn giản) hoặc clipPath (nếu nền của bạn phức tạp) trên đường dây, và chuyển nó sang bên phải để lộ dòng bên dưới.

Answer 2

Dựa trên các bài đăng mà bạn liên kết đến, tôi đã đưa ra ví dụ sau:

var i = 0, 
    svg = d3.select("#main"); 

String.prototype.repeat = function(times) { 
    return (new Array(times + 1)).join(this); 
} 

segments = [{x:35, y: 48}, {x: 22, y: 48}, {x: 22, y: 35}, {x: 34, y:35}, {x: 34, y:60}]; 
line = "M"+segments[0].x + " " + segments[0].y 

new_line = line + (" L" + segments[0].x + " " + segments[0].y).repeat(segments.length); 
var mpath = svg.append ('path').attr ('d',new_line) 
      .attr ('fill', 'none') 
      .attr ('stroke', 'blue') 

for (i=0; i<segments.length; i++) 
    { 
    new_segment = " " + "L"+segments[i].x + " " + segments[i].y 
    new_line = line + new_segment.repeat(segments.length-i) 
    mpath.transition().attr('d',new_line).duration(1000).delay(i*1000); 
    line = line + new_segment 

    } 

Nó là một chút xấu xí, nhưng hoạt động. Bạn có thể thấy nó trên jsFiddle

Answer 3

Một mô hình phổ biến khi dòng hiệu ứng động trong svg là thiết lập một stroke-dasharray chiều dài của con đường và sau đó làm động stroke-dashoffset:

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

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

Bạn có thể thấy một bản demo ở đây: http://bl.ocks.org/4063326