Solution 1 :

I was able to do what I wanted by slightly modifying the above linked code. So, in the current case there wasn’t any problem with the transformation, because I added the element already as the child of the transformed element.

The issue was that the linked question sets attribute X and Y to some number, which shouldn’t be happening in my case. I’ve stripped those attributes.

Also I had to take into account that it’s zoomable, so I had to divide width/height by the scale count.

Finally I just had to take care whether the item was left or right aligned, but that’s actually trivial.

Problem :

I’ve found this great piece of code, which I’d like to use in my hobby project:

I’d like to draw rectangles around the nodes (and color them, which wil have different meanings).

I’ve found this question: How can I draw a box around text with SVG? I changed it to operate on classes and added this piece of code at the end of update() method:

The following happened:

enter image description here

Also it had issues when I was trying to close the nodes, being duplicated.

I’ve tried to reach out the developer to help me with this feature, but he hasn’t yet answered me.


Comment posted by enxaneta

the group the whole graph is in has a transformation. You need to put the text boxes inside this group or give the boxes the same transformation