Đặt mũi tên (điểm đánh dấu) tại điểm cụ thể trên đường dẫn khi sử dụng thư viện javascript d3

Question

Tôi hiện đang làm việc trên biểu đồ trực quan và tôi sử dụng SVG và thư viện D3. Tôi đã được hỏi bởi nhà thiết kế của chúng tôi nếu tôi có thể đặt đầu mũi tên của các cạnh của biểu đồ trên một vị trí tương ứng với 80% chiều dài của các dòng. Tôi đã có thể đạt được phần đầu tiên - nhận được vị trí - bằng cách sử dụng phương pháp getPointAtLength.

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500) 

var path = svg.append("path") 
    .attr("d", "M20,20C400,20,20,400,400,400") 
    .attr("fill", "none") 
    .attr("stroke", "black"); 

var pathEl = path.node(); 

var pathLength = pathEl.getTotalLength(); 

var pathPoint = pathEl.getPointAtLength(pathLength*0.5); 

var point = svg.append("svg:circle") 
    .style("fill", "red") 
    .attr("r", 5) 
    .attr("cx", pathPoint.x) 
    .attr("cy", pathPoint.y); 

Đây là một jsfidle example

Bây giờ tôi tự hỏi làm thế nào tôi ca đính kèm một mũi tên đến vị trí này với định hướng tương ứng. Quan trọng hơn làm thế nào tôi có thể làm điều này để tôi có thể cập nhật các cạnh của đồ thị khi di chuyển các nút liên quan. tôi đã không thể tìm thấy bất kỳ câu trả lời nào, các ví dụ về "cột mốc" đang làm việc với các thuộc tính con đường như: phong cách ('marker-end "url (# end-mũi tên)")

Answer 1

Thứ nhất, câu trả lời dài từ SO. Câu trả lời nhanh là SVG <markers>

Câu trả lời ngắn (cơ bản): Chấm dứt một chút trước dấu chấm đỏ, đo độ dốc và vẽ một đường thẳng giữa hai điểm. Bây giờ câu hỏi được đơn giản hóa thành: Làm cách nào để thêm mũi tên vào cuối đường thẳng? Sử dụng câu trả lời nhanh.

Thêm phần này vào mã của bạn để hình dung câu trả lời: -

var pathPoint2 = pathEl.getPointAtLength(pathLength*0.78); 
var point2 = svg.append("svg:circle") 
    .style("fill", "blue") 
    .attr("r", 3) 
    .attr("cx", pathPoint2.x) 
    .attr("cy", pathPoint2.y); 

var slope = (pathPoint.y - pathPoint2.y)/(pathPoint.x - pathPoint2.x); 
var x0 = pathPoint2.x/2; 
var y0 = slope*(x0 - pathPoint.x) + pathPoint.y; 

var line = svg.append("svg:path") 
    .style("stroke","green") 
    .attr("d", "M" + pathPoint.x + "," + pathPoint.y + " L" + x0 +","+ y0);