Home/ Questions/Q 134927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T06:42:06+00:00

I have an HTML page with some textual spans marked up something like this:

  • 0

I have an HTML page with some textual spans marked up something like this:

... <span id='T2' class='Protein'>p50</span> ... <span id='T3' class='Protein'>p65</span> ... <span id='T34' ids='T2 T3' class='Positive_regulation'>recruitment</span> ...

I.e. each span has an ID and refers to zero or more spans via their IDs.

I would like to visualize these references as arrows.

Two questions:

  • How can I map an ID of a span to the screen coordinates of the rendering of the span?
  • How do I draw arrows going from one rendering to another?

The solution should work in Firefox, working in other browsers is a plus but not really necessary. The solution could use jQuery, or some other lightweight JavaScript library.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You have a couple options: svg or canvas.

    From the looks of it you don’t need these arrows to have any particular mathematical form, you just need them to go between elements.

    Try WireIt. Have a look at this WireIt Demo (which has been deprecated). It uses a canvas tag for each individual wire between the floating dialog divs, then sizes and positions each canvas element to give the appearance of a connecting line at just the right spot. You may have to implement an additional rotating arrowhead, unless you don’t mind the arrows coming in to each element at the same angle.

    Edit: the demo has been deprecated.

    Edit: Ignore this answer, @Phil H nailed it

    • 0