D3.js on Canvas hover on node to select its links - javascript

First off, i've seen questions like this posted several times, but they are all based on SVG, classes and CSS. I'm aiming at solving this using canvas because my final force layout will use 1000+ nodes and svg just doesn't cut it. Also, I have a background in programming but am total n00b to d3. So maybe i'm just missing something obvious.
Here's my current code:
http://bl.ocks.org/gonzam88/3ff2f33975ca8258f4aa9484be4255ce
I guess on mouseover I have to loop all links and check if either source or target matched the current node, but after many attempts i'm not too sure how to achieve this, and how to change specific links properties (when not using SVG).
I feel i'm close but not just there :)
Thanks for reading and hope my english is ok!
UPDATE 1
I've managed to detect links related to hovered node, but when I try to change its stroke it changes every stroke in my graph.
check:
http://blockbuilder.org/gonzam88/9d48b4346fadb6b719a9ce9efb98a899
In this example I only want each group to change to blue line. But both 'groups' are being changed.
Links are drawn on line 140 and my color function is on line 57. How do set stroke color to specific links?

Related

SVG draw and erase in React Native

I am trying to create a sort include/exclude feature in a react native app, where a user can draw on an image to shade or unshade an area to include or exclude it, so that only items in the include(shade) area will be processed. I have gone through a few react native modules but i am having problems getting anything to work correctly. Overall it is very similar to a paint and erase function, but i need to know or be able to calculate the pixels that are shaded.
My latest approach is to use a SVG mask and path. The mask covers an image, and a user draws on it. A user could then click an erase button, and then start drawing another path that adds to the mask to hide the original path. The problem is that after the mask path is added a user can't draw on it, in case they want to make further alterations. I could simply alter the path d value but it wouldn't look quite right.
Does anyone know if you can somehow combine the SVG's, or remove intersecting parts from a path, or have any ideas of a better way to do this?
I am quite sure it can be done with the react-native-reanimated package.
See this as if I got u right its kinda what u are looking for.

Draw links to a d3 circle pack layout

I need to be able to draw links between the circles in a circle pack layout, like {source: i, target: j}. I've seen some questions about how to combine this layout with the force layout that made me think It could be a way to achieve this but I haven't had any luck on that path, also what I need is something completely static. Thank you in advance for any suggestions.
I finally could draw lines between nodes by appending them to the svg and calculating each line position based on the radius of the nodes that each line were to connect, but the problem was that the pack layout that I'm using is zoomable, so when I tried to zoom by clicking the lines neither translate nor re-sized (of course, since there was no code performing such things), so I tried to implement a translation function for the lines so they would move along with the zoom, then I saw that it would take some serious geometry to achieve this, so since I'm a lazy programmer and not at all experienced with d3 I tried to come with something more simple... at last I decided to represent the links between the nodes with a different approach (without lines), I used the "mouseover" event so when the pointer is over a node it will highlight (changed circle stroke attribute color and width) the nodes connected to it. This way I achieved my goal and the view looks a lot cleaner without all the lines crossing over it (they were a lot). I know that some may think that this does not answer the original question, and I'm sure that this can be achieved by someone with more experience (and time and patience) using lines and implementing the right calculation, but in my case this solution solves my problem and maybe it could be of help to others.

How can I get this svg circle to appear above my d3 path and not below?

I wrote a d3 graph plugin that draws a graph based on real time data given to it. When you mouseover the graph, there is a tooltip that follows your mouse, showing data at that point. Part of this tooltip is a circle that appears on the path at the closest point to the cursor. The problem is that no matter what I try, I cannot get this circle to appear above the path line like it's suposed to. I have tried using z-index, changing the append order of elements, and some other really wacky attempts. Nothing has had an affect (besides breaking everything.) Here's a pastebin of the code. The element in question has the class "focusCircle". Any help would be greatly appreciated.
Your circle gets rendered before the "resize" function is called. The "resize" function calls the "draw" function, where 2 paths get appended. I think those are the ones above your circle.

Kineticjs - Creating own line style

I am working on an image editor with kineticjs. So it's time to make nice brushes. I would like to use png images for this with a different set of alpha values for each pixel, depending on the brush type, and changing the color once they are added to the layer.
I would like to know, how can I achieve this? I made a simple painter following the answer to this question But what I want is to reduce the opacity in some parts of the shape that we use as base for painting lines, like in this image. Notice that the first and the last are the same, just the opacity in the last is less. Thank you.
The stroke of a Kinetic.Line cannot use a fillPattern (it's a stroke without any fill).

d3js - animate tree structure

I'm using the radial tree example from d3.js (tree-radial.js) and when you click on a node it should move to the center (set it as the new root). I want to get a smooth transition from one tree structure to another but I can't get it to work at all. The click is recognized but I'm not sure how to transition the nodes. Can somebody explain me the steps to get this work or link a short example where this is done?
I don't know if this helps, but you can have a look at this: http://bl.ocks.org/1249394. The clicked node doesn't move to the center in this example, but in essence you will still need to make some similar transitions, just that you will have to adjust the position of the node to be in the center (slightly different coordinates for the transform).

Categories