How to generate interactive node in network using SVG

[HaoyuanY]

I am using Angular4 and I am planning to use SVG to generate the interactive node in network, but it turns out the button that I created on SVG can't response the click event. I assume it is because the vis library converts the SVG into image. Is there any solution that I can fix this?

[cityy]

I think it really depends on what you want to do. If your node only needs to handle a single click event, you could do something like

network.on('select', function(selection){
  if(selection.nodes[0].id === 'myButton'){
    doThings();
  }
});

Maybe you also want to consider outsourcing interactive UI elements to DOM elements that inherit their position from the selected node (or a similar approach). I don't think you can really create interactive html elements through SVG but maybe someone wants to correct me on that.

[HaoyuanY]

Thanks for the response. Yes, I am trying to make a complex DOM element including buttons to be interactive on canvas. I found a similar example in GOJS.com: https://gojs.net/latest/samples/regrouping.html.

But I am not sure how can I do that using vis since gojs is a commercial product.

[wimrijnders]

I assume it is because the vis library converts the SVG into image.

@HaoyuanY This is correct for network; elements are drawn onto a canvas, SVG's are turned into an image in the process. For the record, timeline uses HTML elements.

I don't think you can really create interactive html elements through SVG but maybe someone wants to correct me on that.

@cityy I can't correct you on this, you are right. The best option is the code example you gave, i.e. catch the click event.

[rahyadav]

@HaoyuanY Hey, did you figure out a way for this? I have exactly same requirement. Node with multiple elements/images inside it and click handlers to each of them. @wimrijnders Any chance that we can be seeing something like this soon?

[wimrijnders]

@rahyadav. No chance at all. I actually do not consider this to be part of the core intent of vis.Network. But feel free to offer an implementation for this!

[rahyadav]

@wimrijnders Thanks for the quick response. I explored a lot of layout algorithms for my graph (nodes with many to many edges, back edges). Really liked the hierarchical layout of vis js, perfectly solves the layout problem for us. However, we have that customized nodes (containing interactive elements inside) requirement too, will see if we can live without them. I see that there are 2 licencing for vis js. Being not well versed with licencing world, Will I be able to use it freely with just MIT ?

[wimrijnders]

I see that there are 2 licencing for vis js. Being not well versed with licencing world, Will I be able to use it freely with just MIT ?

I believe so, yes. MIT is one of the least restrictive licenses in use. But don't take my word for it, read up on it yourself.

[wimrijnders]

As an alternative to actually drawing an svg image on the canvas, I hereby propose to overlay it as a DOM object over the network view.

The basics are discussed in #3300 and it works surprisingly well for HTML. It should work for a displayed svg as well. A great consequence of this is that the overlaid elements can be made to be interactive. Specifically for the svg, it all works as you would expect.

There are issues to be looked at, however. E.g. something needs to be done for zooming the overlaid elements (you can of course just disable zoom). But on the whole, this is a very promising technique.

HTH.

[wimrijnders]

This issue has been labeled Inactive, because there has been no activity here for over two months.

You can:

• Close the issue yourself, so that we know we don't need to take it into account (thanks!).
• Post a new comment to keep it active. The Inactive label and this message will be removed.
• Ignore this comment. If the inactivity continues, the issue will be closed in two weeks.