Quite new with d3 but have been stuck on this for several weeks and figured I'd ask here
I've been trying to create a radial/flare tree using React-Flow but I'm having a really hard time with positioning the nodes. I need to use React-Flow because I'd like to use custom React components instead of the standard SVG nodes from d3 since I need a higher fidelity interaction with the nodes.
Essentially I'm looking for something like this attached image but using React-Flow:
Source: https://observablehq.com/#d3/radial-tree
I don't even need the radial curve lines- it's more of a nice to have. As long as I can get the nodes in the correct circular position, even straight lines are fine.
Would love any advice :)
Here's what I've got so far:
https://codesandbox.io/s/trusting-leavitt-b8uxi9-rf-expand-collapse-forked-fh71v8?file=/src/App.tsx:948-954
It's the collapsible tree example that the React-Flow devs gave on their website
The closest example of a radial tree using d3 using v4 or above is this: https://medium.com/analytics-vidhya/creating-a-radial-tree-using-d3-js-for-javascript-be943e23b74e
I'm trying to apply the logic that the author used in their example but the nodes aren't positioning correctly, probably due to my shallow understanding of how to use d3
There are a few other examples on here/codepen that creates a radial tree using d3 but they're all v3 or below and are focused around using SVGs as the nodes
I've also seen other radial trees from other React libraries like this: https://codesandbox.io/s/ov2jokvl1z
But they all use SVG nodes which won't work for me because I'd like to use React nodes within the graph
Related
I want to achieve this kind of result but do you give me a clue how can I do it with less effort in react?
sliders
You can render SVG on the background.
I use functions for building a cubic bezier curves from this article.
Working example
I am playing with candlestick graphs (example from here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/) everything work as expected.
However, I am struggling with adding my signal data for a visual representation of the graph.
I am unable to find a solution that works I was thinking I can somehow fine-tune a timeline - I tried chart.js/apexcharts and for now, I believe the closest will be with the second framework.
What I need is a bar chart that can be used in numeric ranges for the X and Y-axis as presented below. (the goal is to be able to add the green bar as presented)
Is there an easy win or an idea of how to approach this?
Is there something I am missing?
That is my current solution (line graphs with stopWin/stopLose and entry price).
Still suboptimal - but works and is easy to achieve.
After weeks of playing around with it - the solution stayed:
I got two instances of apexcharts one with candlestick and one with line graphs
they are in a single div with CSS playground and position absolute.
I am passing standardised min/max values and has to have the same amount of elements in them (line graphs are allowing You to add null values which allow using this solution.
The final version work is repeatable and looks good.
if you need some help in similar case - feel free to reach out ;)
I have a graph data structure which can almost be called a tree except for the fact that some nodes point to other branches.
For example:
I am looking for a React package that could render this on screen and most of them don't do it as I would like.
I need to be able to create a custom node appearance, for example: a rectangle with an icon inside, instead of the regular circle.
A big plus would be for the package to be able to position the nodes automatically so that it would look something like the illustration above.
Any suggestions?
I'm trying to carefully word this question because the problem doesn't appear to be that the animation isn't being imported. I can see the animation as <untitled animation> in the scene graph, and I can play the animation in Xcode; the issue is then locating the animation as an attribute to any of the objects. This is what I can see in the scene graph:
But, when I try and locate the animation here:
... nothing appears. So, it seems that it isn't importing the animation as a CAAnimation object with a key.
I have tried to programmatically enumerate through the child nodes to find any CAAnimation objects, but it doesn't see any. Other scenes work perfectly however.
What do I need to add to the DAE file to get it to build the CAAnimation object properly?
Worth pointing out that the 3D model and animation was exported from 3DS Max using OpenCollada. I don't know what the best practices are for exporting collada to SceneKit, and if anyone has any useful information that would be great. Apple don't seem to have anything.
The SceneKit editor in Xcode does not display the root node in the scene graph view, and it might be the one that holds the animation.
You should be able to retrieve the root node's animation programmatically.
I am grouping nodes together and laying them out evenly around the circumference of a circle. I would then like to be able to remove a group of nodes, recalculate the positions of the nodes on the circle and animate them to their new positions using d3.js version 4 of the force simulation. I have this partially working but i can't seem to figure out why when i remove the nodes and recalculate the new co-ordinates they do not move to their new positions. I am hoping someone can help. I'm new to d3.js so it's probably something fairly fundamental but as this is the latest version of the api and the force layout has changed quite a bit there's not a lot of examples (that i can find) out there in the wild.
I have linked to a jsbin of the partially working example below
https://jsbin.com/yetifunoso/4/edit?html,js,output