search

anseki / leader-line

Draw a leader line in your web page.
http://anseki.github.io/leader-line/
MIT License
3.03k stars 424 forks source link

Uncaught TypeError: Cannot read properties of null (reading 'appendChild') #378

Closed MDeus closed 2 years ago

MDeus commented 2 years ago

I have this graph and I want to have leader line arrows going from one element to the next but I am getting that error. I am working with an SVG file where I have stuff like:

<g id="node1" class="node">
<title>IG01</title>
<polygon fill="#ffffcc" stroke="black" points="449.5,-1527 194.5,-1527 194.5,-1360 449.5,-1360 449.5,-1527"/>
<polygon fill="#fcfbfd" stroke="none" points="202.5,-1364 202.5,-1523 441.5,-1523 441.5,-1364 202.5,-1364"/>
<text text-anchor="start" x="301" y="-1497.9" font-family="Courier New" font-weight="bold" font-size="17.00">IG01</text>
</g>

<g id="node2" class="node">
<title>IG02</title>
<polygon fill="#800026" stroke="black" points="449.5,-1324 194.5,-1324 194.5,-896 449.5,-896 449.5,-1324"/>
<polygon fill="#fcfbfd" stroke="none" points="202.5,-900 202.5,-1320 441.5,-1320 441.5,-900 202.5,-900"/>
<text text-anchor="start" x="301" y="-1295.4" font-family="Courier New" font-weight="bold" font-size="17.00">IG02</text>
</g>

I want to create a leader-line between node1 and node2. I call document.getelementbyID on each and pass it to leader-line but it does not work. Any help would be appreciated. Thanks!

anseki commented 2 years ago

Hi @MDeus, thank you for the comment. That error means that an element can't be accessed. To reproduce that, could you show an example by using e.g. https://jsfiddle.net/ ?

MDeus commented 2 years ago

Hi, it works in js fiddle, link: jsfiddle. I am wondering what is the best way to import the library on my local code. because I do: <script xlink:href="https://cdn.jsdelivr.net/npm/leader-line@1.0.5/leader-line.min.js"/> inside the SVG and get that error locally. in jsfiddle I place the link in resources and it works as expected but that does not happen locally.

anseki commented 2 years ago

Your code (line#40) is wrong:

<script> xlink:href="..." </script>

If you want to load any script file, you have to write this:

<script xlink:href="..."/>

JSFiddle adds <script> in to HTML (not SVG) if you specified "Resources".

MDeus commented 2 years ago

I have tried both: <script> xlink:href="..." </script> and <script xlink:href="..."/> and neither seems to work.

anseki commented 2 years ago

If you want to use LeaderLine in your web page, load LeaderLine into your web page. https://anseki.github.io/leader-line/#usage That is, you have to add <script> element to <head> element. Not SVG.

MDeus commented 2 years ago

I was initially just creating a pure svg file not an HTML file but it looks like it is giving issues with that so I will just switch to creating an HTML file with an SVG tag. Thank you for your help!

anseki commented 2 years ago

Yes, you should use "Inline SVG" instead of stand alone SVG if you will use a script because some viewers may ignore all script in stand alone SVG. So, could you close this issue?

anseki commented 2 years ago

:smile: :thumbsup: