小编ron*_*nen的帖子

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

我对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");
Run Code Online (Sandbox Code Playgroud)

......然后还:

    force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", …
Run Code Online (Sandbox Code Playgroud)

svg marker d3.js force-layout

6
推荐指数
1
解决办法
2755
查看次数

标签 统计

d3.js ×1

force-layout ×1

marker ×1

svg ×1