SVG 마커가 D3 힘 레이아웃 링크로 사용되는 d3.svg 대각선 곡선에서 올바르게 방향이 지정되지 않습니다.

Question

SVG 및 d3.js.

D3 힘 레이아웃으로 그래프를 그리는 동안 간단한 대각선 생성기를 사용하고 마커 - 엔드를 사용하여 화살표 헤드를 그립니다.

대각선 생성기 대신 호를 사용하면 화살표 머리가 잘 보입니다. 그러나 코드에서와 같이 대각선 생성기를 사용하여 아래 적절한 마커를 생성하지 않습니다 또한 다음

var vis = this.vis = d3.select(el).append("svg:svg") 
    .attr("width", w) 
    .attr("height", h); 

var force = d3.layout.force() 
    .gravity(0.03) 
    .distance(120) 
    .charge(-800) 
    .size([w, h]); 

var linkDiag = d3.svg.diagonal() 
    .projection(function(d) 
    { 
     return [d.x, d.y]; 
    }); 

vis.append("svg:defs") 
     .selectAll("marker") 
    .data(["normal", "special", "resolved"]) 
    .enter() 
     .append("svg:marker") 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M 0,-5 L 10,0 L0,5"); 

...과 :

force.on("tick", function() { 
     link.attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }) 
     .attr("d", linkDiag) 
     .attr("marker-end", function(d) { return "url(#special)"; }); 

    }); 

마커는 모든 꼭지점에서 지향하지 않습니다.

도움이 될 것입니다.

Answer 1

조금 더 질문을 지정할 수 있습니까? 그러나 심지어 당신에게 코드를 실행하는 당신이 문제 POS에게 당신이 화살표를 이동하고 있기 때문에 화살표가 올바른 방향으로 가리키는하지 않는 것처럼 만 나타납니다

Answer 2

지정

.attr("orient", "auto") 

에 한번있을 것 같아요 refX 및 refY을 통해 새 위치로 이동하십시오.

예를 들어 다양한 방향으로 대각선을 그리는 this code을 확인하십시오. 화살촉은 180 도의 각도를 제외하고 올바르게 표시되지만 반올림 오류가 원인 일 수 있습니다.

이제 10 행의 refX을 5라는 값으로 변경하십시오. 이제 수평에 가까운 화살촉이 올바르지 않게 표시됩니다. 좀 더 극적으로 보려면 값을 8로 변경해보십시오.

대각선의 일부가 숨겨져 선이 실제 끝점에서 약간 다르게 구부러지는 초기 점으로 끝나는 것처럼 보입니다. 포인트. 화살촉이 너무 커서 커브의 일부를 오버레이하는 경우 동일한 작업이 수행됩니다. 대칭 베 지어 곡선 인 d3의 대각선의 경우 화살촉은 항상 완벽하게 수평 또는 수직을 향해야합니다. 화살촉의 불투명도를 줄임으로써 정확히 무슨 일이 일어나는지 알 수 있습니다.