Question

我对SVG和d3.js有点新鲜。

在使用D3力布局绘制图形时，我使用简单的对角线生成器并使用标记端绘制箭头。

当使用弧而不是对角线发生器时，箭头看起来很好。但是使用像下面代码中的对角线生成器不能产生适当的标记：

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

    });

标记根本没有与顶点对齐。

任何帮助将不胜感激！

Answer 1

只显示箭头没有指向正确的方向，因为您通过refX和refY将箭头移动到新位置。

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

现在，尝试将第10行的refX更改为值，例如5.现在，靠近水平的箭头显示不正确。要更加明显地看到这一点，请尝试将值更改为8。

正在发生的事情是你隐藏了对角线的一部分，所以这条直线似乎是在一个较早的点结束，这个点与实际的终点略有不同。如果箭头太大而使其覆盖部分曲线，则会发生同样的事情。请注意，对于d3中的对角线（对称贝塞尔曲线），箭头应始终呈现完全水平或垂直方向。你可以通过减少箭头的不透明度来确切地看到发生了什么。

Answer 2

你能指出一些问题吗？然而，即使运行代码，我认为您的问题可能是

.attr("orient", "auto")

尝试指定pos

SVG标记在用作D3力布局链接的d3.svg.diagonal曲线上没有正确定向

2 个答案: