Speaking of browser dependence...

Community Help
1

I’m obviously a newbie to the world of JavaScript.

I just noticed that in this notebook, when I view it in Chrome, all is good. When I view it in Safari (yuck), the arrow-heads aren’t displayed.

Please don’t waste your time explaining things to me that I can read about elsewhere - just point me in the right direction. I promise I’ll do my homework, I’m just not sure exactly what to look up.

I’m starting to understand that I’ll need to learn more about what various browsers do and don’t support - I’m a guy coming from the MATLAB / R world but very much prefer an online medium like Observable, especially for teaching / sharing purposes and minimizing dependency issues.

Thanks!

2

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
3

Thanks, once again!