Obter pontas de seta para apontar para a borda externa do nó em D3
Sou novo no D3 e estou tentando criar uma visualização de rede interativa. Copiei grandes partes deisto Por exemplo, alterei as linhas curvas para linhas retas usando "linhas" de SVG em vez de "caminhos", e também dimensionei os nós de acordo com os dados que eles representam. O problema é que minhas pontas de seta (criadas com marcadores SVG) estão nas extremidades das linhas. Como alguns dos nós são grandes, as setas ficam escondidas atrás deles. Eu gostaria que minhas pontas de flechas aparecessem bem na borda externa do nó para o qual elas apontam.
Aqui está como eu estou criando os marcadores e links:
svg.append("svg:defs").selectAll("marker")
.data(["prereq", "coreq"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
Percebi que o atributo "refX" especifica a que distância do final da linha a ponta da seta deve aparecer. Como posso fazer isso dependente do raio do nó que está apontando? Se eu não puder fazer isso, posso alterar as extremidades das linhas? Eu estou supondo que eu faria isso nesta função, que redefine os pontos finais das linhas como tudo se move:
function tick() {
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; });
circle.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
text.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
Qual abordagem faz mais sentido e como eu implementaria isso?