6
Soy un poco nuevo en SVG y d3.js.Los marcadores SVG no se orientan correctamente en una curva d3.svg.diagonal utilizada como enlace de diseño de fuerza D3
Mientras dibujo un gráfico con el diseño de fuerza D3, estoy usando un generador de líneas diagonales simple y uso de marcador para dibujar cabezas de flecha.
Cuando se utiliza arco en lugar de generador diagonal, las puntas de flecha aparecen bien. Pero el uso del generador en diagonal, como en el siguiente código no produce marcadores adecuados:
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");
... y luego también:
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)"; });
});
Los marcadores no están orientados en absoluto con los vértices.
¡Cualquier ayuda sería apreciada!
¿Alguna posibilidad de que haya podido resolver esto? En mi caso, me di cuenta de que mis nodos circulares eran grandes y el marcador se estaba representando, pero siempre se representaba detrás del círculo. Sin embargo, aún estoy teniendo problemas para determinar los valores apropiados de refX, refY, etc. para el marcador:/ – dchang
También tengo curiosidad por saber si hay una solución para esto. –