Can't create a symmetric link graph using Gojs - javascript

I have been trying to use GoJS to draw some interactive graphs in my application but I couldn't figure out how to make a link graph to display symmetrically.
The current graph that I drew looked like this image.
In the image, I expect the element A>90 to be symmetric with the A>91 element but I can't make it happen.
Can anyone give me a hint to correctly config GoJS to achieve this? Thank you!

Related

Circle-Packing chart with direction links

I'am trying to create circle-packing chart like that
https://bl.ocks.org/mbostock/4063530
But I also want to create some relation between data, to show how data binds to each other, so I need to add some code to change example above to make it like on this image: Circle chart with relational links
So the question is: is it possible to add relational between children in array to reach desired behavior and change Circle-chart layout to Linked Circle chart layout?
P.S. I'm new in d3.js so I don't have deep knowledge in this field, so It would be great if you provide me some examples how to reach that
I've solved my problem my problem by myself, The solution is that to draw arrows by hands without d3 layout tools, I hope it could be useful for someone:
Circle pack with relation arrows

Creating a network map using D3

Does anyone know how to create a map as shown below using D3?
https://www.khanacademy.org/exercisedashboard
I am wondering how one able to zoom in/ zoom out, then give nodes some symbol plus name and clicking on the nodes leads to some URL. Is it possible this kinda map with D3?
Thank you very much.
Hi you can find more information on this page;
Examples
And it is possible.
Some useful links
http://matthiasnehlsen.com/blog/2013/05/18/using-d3js-with-play/
https://vida.io/documents/N4jSip7n68yQ48DXp

d3.js - how to actualize the graph data? transition?

I am trying to learn d3.js (with no JavaScript background) so I created a simple scatter plot.
Now, I am looking for how to render that graph with random data, each time the user click on the Next button.
In the link above, there is what I tried so far.
I know it's a very newbie question and there is thousands of example but I am looking for an explained solution (not just code). Thanks
PS: Please change the external ressource to this if the graphs won't show up.

Transform image on canvas based on 4 points

I have a small application that uses Paperjs to render an image between four points.
The user should be able to drag these four points freely.
It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.
Do you know a library that is able to help me with this job?
Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:
Image.transform(point1, point2, point3, point4);
Just like this ActionScript demo, but in Javascript with canvas:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
Thank you!
This d3.js codesnippet did the job for me:
http://bl.ocks.org/mbostock/10571478

Adding a Background to certain part of a graphic with nvd3

I' have an already made a Stacked/Group multi bar chart with NVD3 which is working great. I need to add a grey background to some of the places of the graphic to inform something to the user.
Does anybody know how to do this?
Thanks!
If I understand correctly you don't want a background for the whole chart. In this case you can always use d3's own insert method selection.insert(name, before) (see the documentation at https://github.com/mbostock/d3/wiki/Selections#wiki-insert ) to display an svg object at a certain in front / behind certain elements...(I guess it would be behind all the groups from you animation basically).

Categories