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 将箭头移动到新位置。

例如,请查看 < a href=>" "http://jsfiddle.net/2zqSN/2" rel="nofollow" >这个代码 ,它在不同方向上绘制对角线。箭头看起来是正确的,但180度方向的箭头除外,但很可能是因为四舍五入的错误。

现在,尝试将第10行的 refX 修改为,比如,5。现在, 接近水平的箭头似乎不正确。要更明显地看到这一点, 请尝试将值修改为 8 。

发生的情况是您隐藏了对角线的一部分, 所以直线似乎会在较早的一点结束, 与实际的结束点稍有不同。如果箭头太大, 以致它覆盖曲线的一部分, 也会发生同样的情况。注意对于对称的偏角曲线的 d3 的对角线来说, 箭头应该总是显示完全水平或垂直的指向。您可以通过减少箭头的不透明性来看到正在发生的情况。

Answer 2

Can you specify you question a little more? However with even running you code I think you problem might be

.attr("orient", "auto")

尝试指定空数

友情链接