SVG 标记在用作 D3 强制布局链接的 d3.svg.diagonal 曲线上的方向不正确答案

【问题标题】：SVG markers don't orient properly on a d3.svg.diagonal curve used as a D3 force layout linkSVG 标记在用作 D3 强制布局链接的 d3.svg.diagonal 曲线上的方向不正确
【发布时间】：2012-05-23 11:48:34
【问题描述】：

我对 SVG 和 d3.js 有点陌生。

在使用 D3 力布局绘制图形时，我使用了一个简单的对角线生成器并使用 marker-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)"; });

    });

标记与顶点完全不同。

任何帮助将不胜感激！

【问题讨论】：

你有没有机会解决这个问题？在我的例子中，我意识到我的圆形节点很大并且标记正在被渲染，但总是在圆圈后面渲染。不过，我仍然遇到问题，尽管确定标记的正确 refX、refY 等值：/
我也很好奇是否有解决办法。

标签： svg d3.js marker force-layout

【解决方案1】：

它只是看起来好像箭头没有指向正确的方向，因为您正在通过refX 和refY 将箭头移动到一个新位置。

例如，查看this code，它在各个方向上绘制对角线。箭头显示正确，但 180 度的箭头除外，但这可能是由于舍入误差。

现在，尝试将第 10 行的 refX 更改为一个值，比如 5。现在，靠近水平方向的箭头看起来不正确。要更显着地看到这一点，请尝试将值更改为 8。

发生的情况是您隐藏了对角线的一部分，因此该线似乎在较早的点结束，该点的弯曲与实际端点略有不同。如果箭头太大以至于它覆盖了曲线的一部分，也会发生同样的事情。请注意，对于 d3 中的对角线，它们是对称的贝塞尔曲线，箭头应始终完美地指向水平或垂直方向。通过降低箭头的不透明度，您可以准确地看到正在发生的事情。

【讨论】：

【解决方案2】：

你能具体说明你的问题吗？然而，即使运行你的代码，我认为你的问题可能是

.attr("orient", "auto")

尝试指定位置

【讨论】：