0

我正在尝试使用带有平移和缩放的 D3JS 制作一个力导向图。在我引入标记以使链接箭头结束之前，该图工作正常。当我这样做时，它在 chrome、firefox 和 safari 中运行良好，但是当我在 MS Edge 中缩放时图表崩溃。如果你看这个小提琴： https : //codepen.io/aschultz/pen/gQJaKb 第 140-152 行添加箭头

var arrows = g.append("svg:defs")
    .attr("class","arrows")
    .append("svg:marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -10 20 20")
    .attr("refX", 33)
    .attr("refY", 0)
    .attr("markerWidth", 10)
    .attr("markerHeight", 10)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-10 L 20 0L0,10");
link.attr('marker-end', "url(#arrow)")

这个小提琴将在 MS Edge 放大时崩溃。但是，如果您在缩放之前注释掉第 152 行： https ://codepen.io/aschultz/pen/LXopOX

//link.attr('marker-end', "url(#arrow)")

然后它工作正常，但显然你没有得到箭头。一种解决方法是用路径本身替换标记： https ://codepen.io/aschultz/pen/eQaBBm 但是你显然会失去很多关于标记的好东西，如果你开始做数学会变得更棘手不直的路径。关于如何使用 Edge 上的标记进行这项工作的任何建议？

小提琴是根据 Tom Roth 的示例修改的：https ://bl.ocks.org/puzzler10/4438752bb93f45dc5ad5214efaa12e4a 其他修改包括将链接从行更改为路径：

//.enter().append("line") to
.enter().append("svg:path")

然后更改链接操作以处理路径：

//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; }); to
link.attr("d",function(d){return "M" + d.source.x + "," + d.source.y + "L" +
 d.target.x + "," + d.target.y;})
4

0 回答 0