Маркеры SVG неправильно ориентируются на кривой d3.svg.diagonal, используемой в качестве ссылки силового макета D3

Я немного новичок в SVG и d3.js.

При рисовании графика с раскладкой сил D3 я использую простой генератор диагональных линий и маркер -end для рисования наконечников стрелок.

При использовании дуги вместо диагонального генератора наконечники стрелок выглядят нормально.Но использование диагонального генератора, как в приведенном ниже коде, не дает правильных маркеров:

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

    });

Маркеры вообще не ориентированы по вершинам.

Любая помощь будет оценена по достоинству!

6
задан VividD 17 February 2014 в 18:37
поделиться