When I read the documentation on JointJS, I find that there are discussions on "Elements" and "Cells". What are the differences between them?
In JointJS, the core items on the graph (diagram) are "Elements" and "Links". Think of an element as the visualization of a node such as a rectangle or circle and a link being a "wire" connecting the two. The elements and links are the fundamental building blocks in a JointJS model. Together, these are termed "cells". So an element is an example of a cell and a link is also an example of a cell.
For example, if we ask the diagram to find me all the cells, it will return a set of all elements and links.
Related
I'm a big fan of PaperJS, however, the library doesn't see much activity so we're looking at other tools, like KonvaJS, Fabric, and Pixi. We'd like to replicate the example here:
http://paperjs.org/examples/path-simplification/
in KonvaJS but we're not sure which class is the most appropriate? Should we use the line, which is described as a collection of points with tension, the path tool which is what we use in Paper, or the shape class? Does KonvaJS offer the same type of access to the bezier curve tools and shape border, blue line, found in the above-mentioned paper example?
Konva.Line requires a list of x & y passed into its points property as a simple array, then draws straight lines connecting those points. The tension property can be used to make the straight line joins more curvy.
Konva.Path expects you to provide a data property that is more like a list of SVG drawing instructions, so move, lineto, arc, etc. (See supported instructions list in Konva docs for Konva.Path.data here)
There is no built-in equivalent path-editing features to those in the demo you linked to - so no automatic anchors on the path control points and no Bezier handles. You would have to DIY those. Having said that, it would all be achievable - what I mean is the drawing of the control anchors and lines, the listening for mouse and drag events, and the final passing back of the SVG drawing data to the Konva.Path shape when the path's edit mode ends are all well supported in Konva.
As at May 2022, the Konva lib is well supported, with appropriately frequent (as Goldilocks would want - not too many and not too few), no ill-thought-out breaking changes, issues are responded to, SO posts replied to, and there is a busy Discord channel.
I read a couple of posts on position nodes in force layout but didn't find an answer to what I was looking for.
I have an object with nodes and links.
I' trying to create a graph which would show all the nodes top to bottom.
I was looking at the example code from here:
https://github.com/danielstern/force-graph-example
Here's a screenshot of the result:
I'm trying to find a way to position each node so the nodes without parents would be on the top and the ones connecting to them would be under them and so forth.
Here's an image to illustrate it:
Right now, all the nodes are scattered randomly.
I wanted to if I need to actually calculate the position of each node in a vertical view or is there a smarter/built-in way to achieve it.
I looked at this example which looked promising:
How to organise node positions in D3 Force layout
But in my case I don't have a way to differentiate between nodes levels so I don't think the yPostion would help.
I was also looking at thes post:
d3.js - How can I expand force directed graph horizontally?
According to #Lars Kotthoff:
"The point of the force layout is to automatically lay out a graph like this so that you don't have to specify the positions of the nodes yourself".
Since my graph is not really a tree, I don't think the tree view would match.
What would be my best approach to position the nodes?
Or perhaps there's a better library to achieve what I need?
I found this package:
d3-dag
It basically supports what I need:
"Often data sets are hierarchical, but are not in a tree structure..."
Here's an exmaple:
exmaple
Let's say you're placing rectangular tooltips on a screen of elements you want to provide information for. You want all these tooltips to be visible all at once and not cover any of the nodes any of the other tooltips are for.
You want each tooltip to be as close to the item its related to as feasible. What algorithm(s) exist to help solve this problem?
I've checked out rtrees, which seem to only help you find collisions, but don't help on the front of actually searching for free locations. I've found rectangle packing algorithms that search for a position unconstrained by a maximization function (like "be closest to this other element as possible").
I can imagine an algorithm that has some physics simulation where nodes and their tooltips are each connected by some kind of rubber band and plays it out until equilibrium, but I'd think that things could be calculated faster and less complicated than that.
Any related algorithms or libraries would be helpful. Bonus points for a javascript library : )
You might investigate map labeling algorithms.
See, for example, these lecture notes by Robero Tamassia #Brown:
PDF download.
Does anyone know if it is possible to combine (for example) different CGContext paths to create a new combined shape as in this example?
Thanks!
I found a library that does Union operations on CGPaths:
https://bitbucket.org/martinwinter/vectorbooleancg
I haven't tried it yet, but the author of the CG branch of Vectorbool, Martin Winter, states that the union operation should be usable in its current form on iOS. I will add information when I get around to trying to implement it.
I doubt that there is an Apple lib that supports this feature.
What you need is a so called "union of two (or more) polygons", sometimes called boolean operations on polygons.
I would convert the CGPath to a polygon, probably you start creating a point array that contains your polygon points. That means to not use CGPathAddEllipse, but to approximate the shapes , by e.g a regular polygon with something between 64 and 256 vertices.
You can easily calculate the points of a circle or ellipse for yourself (using something similar to a*cos(t), b*sin(t) see wikipedia for ellipse "parameter formula")
Then you take one of the c libraries that provide these "union operation".
One of that is the LEDA lib.
I'm not math savvy, but this Mathematica plot caught my eye and I was hoping you could help me identify it.
I've searched the various functions and keywords found in the pictured code, but none of the results suggested anything specific to me about whatever algorithm is at work in this plot.
Sorry about the quality, it's a screen capture of a video
Looks like a Voronoi Diagram to me.
As others have noted, you're looking at a Voronoi diagram generated by Mathematica. You can see the Mathematica expression being used, and the key function is ListDensityPlot.
If you follow the latter link and open the "Neat Examples" section you'll see another Voronoi diagram. The key parameter there is InterpolationOrder→0.
Except for the two dots in the light-purple area (third from top left), one of which might be a video artifact, every coloured area has a single dot, and points in the field appear (both by looking at the diagram and guessing what the code means) to be coloured according to which of the dots they are closest to.
Which would make it, as #Moron has said, a Voronoi diagram.
True. Voronoi Diagrams can build that sort of "image".
Look for Voronoi Diagrams or Thiessen Polygons.