Сила-ориентированный граф D3js с изменением масштаба в MD Edge при введении маркеров - PullRequest
Новая
       19

Сила-ориентированный граф D3js с изменением масштаба в MD Edge при введении маркеров

0 голосов
/ 04 декабря 2018

Я пытаюсь сделать форсированный график, используя 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?

Скрипка была изменена из примера Тома Рота: 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;})
...