Add Buttons to ThreeForceGraph nodes (Sprite, NodeThreeObject, Three.js)? - javascript

It is possible to customise nodes on a ThreeForceGraph, using APIs provided at https://github.com/vasturiano/three-forcegraph, using the method ThreeForceGraph.nodeThreeObject(...). The ... here can be a THREE.Sprite instance, and we can render any svg picture to THREE.Sprite.
However, I wish to have something more than a picture. I wish to add two clickable buttons to each node of the graph. I can do Sprite.addEventListener(...) to detect mouse click, but this is not quite the same as a button. It would be really nice if I can make each node on the graph into a React component (that would be the ideal situation).
After looking around, I haven't found any ways to implement this. Is there any ways to achieve what I described? (Of course, it does not need to be a method of Three.js.) Any examples/references are greatly appreciated.

Related

How to manipulate SVG paths onclick with React?

I'm aiming to create an interactive SVG like the following:
https://codepen.io/iamandrea/pen/rNjPemO
Basically, I want to load an SVG and allow the user to click and modify the paths.
This example uses Two.Js, however, and I'm having trouble translating this to React. After doing some research, I'm not sure if it's the best library to combine for this task.
I was wondering if anyone knew a library that could do something similar? Otherwise, if there's a technique to gather onClick data from an SVG anchor point, that way I can make my own. All I can find so far is how to click an entire SVG rather than the anchors.
jQuery(function($){
$('path').click(function(){
this.style.fill = "#"+colors[i++%colors.length];
});
Sorry that I don't have any other code to show, I've been searching for answers all day and haven't found anything.
Appreciate any help in advance :)

Display (syntax) trees in webpage

I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here

Bootstrap Tooltip Following Animated Element

I have a D3.js chart similar to this. As the user drills down into the chart I utilize the bootstrap tooltip to display the nodes name. I am currently tracking the node by call the tooltip show method over and over which cause the tooltip to re-render at the new location.
setInterval(function(){
$(node).tooltip('show');
}, 100)
My concern is that calling this function like this will cause performance issues. Can anyone suggest a better way to accomplish this or give me some insights on to performance issues when using the setInterval function this way?
From your description it sounds like what you are trying to do would be better accomplished by listening for discrete changes in state rather than time. I haven't worked with D3.js, but even something as simple as listening for clicks on <circle> elements would be a ton more efficient.
JS
$('svg').on('click', 'circle', function () {
$(node).tooltip('show')
})
It looks like D3.js has it's own event framework, but I'm not sure if it supports delegation. Someone more familiar could probably provide a better suggestion to that end.
Finally, depending on how many nodes you show at once, calling tooltip show on all of them could itself generate a performance hit. Tracking which ones open and close each time by storing references could be more efficient. Again, there might be something already in D3.js to handle this, but it's not something I know.

Javascript Library to dynamically create graphs?

Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.

get element via coordinates?

High all, I was wondering if it was possible to select an on page element via its coordinates?
reason being i'm trying to make an editable page where you can right click on highlighted elements, menu appears and then select from the options give. using the only method i could find that worked to select the element via hover it uses (event.target) which if having lots of parents combined with other code, it loops through and looses other data along the way. If i can find another method for highlighting the elements that would be of course better.
This is a terrible way to go about doing what you are trying to do, and I speak from experience: I inherited a calendar tool that figures out what day of the month you clicked on based on your mouse co-ordinates. The stupid thing certainly works, but it's a giant PITA to maintain/modify/add to in any way.
The much, much better way to go about it (unless you want a maintenance nightmare in your future) is to use the event object. If you hook up your events to the correct objects and use e.target (or, if you use jQUery, "this") you should be able to very easily route the correct actions based on the where the user clicked, without any coordinate nonsense.

Categories