SVG标记don'；t在用作d3力布局链接的d3.svg.对角线曲线上正确定向

我对SVG和d3.js有点陌生

在使用D3力布局绘制图形时，我使用了一个简单的对角线生成器，并使用marker end绘制箭头

当使用arc而不是对角线生成器时，箭头看起来很好。但使用下面代码中的对角线生成器无法生成正确的标记：

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

    });

标记根本不与顶点一起定向

---

任何帮助都将不胜感激

你能详细说明你的问题吗？ 然而，即使运行您的代码，我认为您的问题也可能是

.attr("orient", "auto")

---

尝试指定位置

因为要通过

refX

和

refY

将箭头移动到一个新位置，所以箭头似乎没有指向正确的方向

例如，检查哪个在不同方向绘制对角线。箭头显示正确，但180度的箭头除外，但这可能是由于舍入错误造成的

现在，尝试将第10行的

refX

更改为值，例如5。现在，靠近水平面的箭头似乎不正确。要更生动地看到这一点，请尝试将该值更改为8

---

发生的情况是，你隐藏了对角线的一部分，所以这条线似乎在一个较早的点结束，这是弯曲略有不同于实际的端点。如果箭头太大，以至于它覆盖了曲线的一部分，也会发生同样的情况。请注意，对于d3中的对角线，即对称贝塞尔曲线，箭头应始终显示为完全水平或垂直指向。通过降低箭头的不透明度，您可以准确地看到发生了什么。

您有没有可能解决这个问题？在我的例子中，我意识到我的圆节点很大，标记正在渲染，但总是在圆后面渲染。但是，我仍然有一些问题，比如确定标记的正确refX、refY等值：/I我也很好奇是否有解决方案。