I marcatori SVG non si orientano correttamente su una curva d3.svg.diagonal utilizzata come collegamento di layout forza D3

Question

Sono un po 'nuovo per SVG e d3.js.

Mentre si disegna un grafico con il layout di forza D3, sto usando un semplice generatore di linee diagonali e usando il pennarello per disegnare le punte delle frecce.

Quando si utilizza l'arco al posto del generatore di diagonale, le testine di freccia vengono visualizzate correttamente. Ma utilizzando generatore diagonale come nel seguente codice non produce marcatori appropriati:

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"); 

... e poi anche:

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)"; }); 

    }); 

I marcatori non sono orientate a tutti i vertici.

Qualsiasi aiuto sarebbe apprezzato!

Answer 1

Puoi specificare qualche domanda in più? Tuttavia, con persino l'esecuzione di codice penso che si problema potrebbe essere

.attr("orient", "auto") 

tenta di specificare pos

Answer 2

Esso appare solo come se le frecce non puntano nella giusta direzione, perché si sta spostando la freccia in una nuova posizione tramite refX e refY.

Ad esempio, controllare this code che disegna le diagonali in varie direzioni. Le punte delle frecce appaiono correttamente, con l'eccezione di quella a 180 gradi, ma probabilmente a causa di un errore di arrotondamento.

Ora, prova a cambiare refX sulla riga 10 su un valore di, ad esempio, 5. Ora, le punte di freccia vicino all'orizzontale non sono visualizzate correttamente. Per vedere questo in modo più drammatico, prova a cambiare il valore su 8.

Quello che sta succedendo è che stai nascondendo parte della diagonale in modo che la linea sembri terminare in un punto precedente, che è leggermente diverso dalla fine effettiva- punto. La stessa cosa succederà se la punta della freccia è troppo grande in modo che si sovrapponga a parte della curva. Si noti che per le diagonali in d3, che sono curve simmetriche più bezier, le punte delle frecce dovrebbero sempre apparire puntate perfettamente orizzontalmente o verticalmente. Puoi vedere esattamente cosa sta succedendo riducendo l'opacità della punta della freccia.