我对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)"; });
});
标记与顶点完全不定向。
任何帮助将不胜感激!
它只是看起来好像箭头没有指向正确的方向,因为您正在通过refX
和refY
将箭头移动到新位置。
例如,查看此代码,该代码在各个方向上绘制对角线。箭头显示正确,除了 180 度的箭头,但这可能是由于舍入错误。
现在,尝试将第 10 行的refX
更改为值 5。现在,靠近水平的箭头显示不正确。若要更显著地看到这一点,请尝试将值更改为 8。
正在发生的事情是你隐藏了对角线的一部分,所以这条线似乎在较早的点结束,该点的曲线与实际终点略有不同。如果箭头太大以至于它覆盖了曲线的一部分,也会发生同样的事情。请注意,对于 d3 中的对角线(对称贝塞尔曲线),箭头应始终以完美的水平或垂直方向显示。您可以通过降低箭头的不透明度来准确了解正在发生的事情。
你能指定你再问一点吗?但是,即使运行您的代码,我认为您的问题可能是
.attr("orient", "auto")
尝试指定位置