Speaking of browser dependence...

You’re running into an annoying issue that came up also in this post. Specifically, I think that Safari isn’t treating the URL properties in your SVG properly (see this SO answer that I linked in my previous post).

Here’s one quick fix (inspired by Mike Bostock’s solution in the previous forum thread). I just tested this and it seems to work in Firefox, Safari and Chrome. Change the second to last line in addArrow in your Common notebook from

    .attr("marker-end", "url(#triangle)");

to:

    .attr("marker-end", `url(${window.location.href}#triangle)`);

All this does is explicitly add the URL of your notebook to the URL property of the arrowheads.

One way to start debugging this sort of thing is to open up your browser’s dev tools and select elements on the page to see their code and attributes. You can frequently change those on-the-fly and see if your changes have any effect. I remember spending a fair bit of time doing that when I was writing my post in the other thread. At the very least it gives you some more terms to google.

1 Like