I started integrating React with D3 where I use React for the DOM and D3 for the math. My use case is creating a Tree Chart where the children are collapsible.
Since I'm using React for rendering the DOM, I am trying to use setState to trigger a rerendering for the "collapsed" children nodes, but I am encountering some problems.
1. It does not properly orient the nodes and paths
2. When I "expand" the child nodes they are placed in the wrong place
This is the initial state of the tree. Everything looks fine
Then I click on Level2: A and it collapses its children but the nodes and paths are out of place
Then when I collapse Top Level while Level2: A is collapsed and expand it I get the following
Here is a link to my code: http://codepen.io/anon/pen/vNQqoQ. If anyone has any insights it would be very appreciated.
Thanks
Just add a couple of \u00A0 (backslash uA00A0) to the text in the children object to insert space at the start of the text
Related
I'm backend developer for several years but a newbie in frontend issues.
I used "graphviz" (using d3.js) to draw an SVG graph from DOT notation.
Everything is working fine but one thing I don't get in my mind:
If I "open" another (or the same one) graph its starting position is the
same as this from the previous drawn graph even if I completely remove
the whole node content from the dom as follows:
var svg = d3.selectAll("svg");
var otherBelow = svg.selectAll("*");
otherBelow.remove();
// svg.remove();
Doing this and checking the page source the nodes below SVG are realy dropped
but drawing the new graph it has exactly the position of the previously
moved graph in "transform" attribute. Doing a work around by resetting the
position bevore solves this problem but then the problem remains for the
"moving on mousedown" capability. Then the graph immediately "jumps" to the old
ones position. But therefor I can't even get an information about somewhere
in the page source. Really the generated page code is 100% the same (with
diff tool) but has a different behaviour. Don't understand how this is possible.
So now my question: Is there a kind of caching? Or is there perhaps the
browser cache used somehow internally? How to fix this?
P.s. if I remove the SVG node itself I get a completely courious behaviour.
Then the newly drawn graph is not movable at all.
This (ugly) workaround does it for me.
// Snipped to render a new graph and reset its position
// #graph -> id of d3-graphviz div-container
document.getElementById('graph').innerHTML = ''
setTimeout(() => {
d3.select("#graph").graphviz()
.dot(yourDotData)
.render()
}, 50)
Explanation/Assumption why this works:
It seems that the deletion of the old graph with .innerHTML = ''and the creation of the new one should not happen in the same rendering phase/at the same time, therefore the timeout function.
The second part of the workaround is to use a new graphivz-instance to render the new graph, therefore the
d3.select(...) within the timeout function.
The graphviz renderer is still present on the element it was created on and has all its data still intact.
Removing the svg and then reuse the renderer is not a valid use case. Nico's answer is probably correct, but there are better ways to do it, but in order to tell you how you should do it instead I would need so see all of your code so I can understand what you really want to do.
How can add nodes in the force layout of D3 after json is loaded.
Please check with the below image
I just want add four nodes without links at the corner of the layout.
I am editing with the latest code which is available in the fiddle
http://fiddle.jshell.net/nj11eruq/10/
I have reached the last leg. Now i could brush the graph and the graph gets redrawn for the selected area. I can zoom in to a detail level. However i need to reset the graph when i double click/ click the graph (no resizing brush). I am missing something here.
finally, found out the way to implement the same. (of course some more optimizations,validations expected)
http://fiddle.jshell.net/nj11eruq/12
I'm having a problem updating nodes in my force layout. I have used some help from another stackoverflow post for updating nodes. This worked out fine until I realized that everything(circle svg, lines, text, etc) were under their own "g" tag.
So that means that I cannot manipulate any of the text like I did before. If you compare this with this you can see that in the first fiddle, I can't increase the text size based on the click. d3.select(this).select("text") does not work since the "g" tags do not include a circle and a text together.
So I need to be able to manipulate the text in correspondence to the node. The second fiddle handles that but it has a problem updating the nodes. If you hit the update button, it updates all the nodes but it does not remove existing nodes. For the first fiddle, update works fine but i can't manipulate the text like I mentioned earlier. So for a solution, I need to either find a way to manipulate the text in the first fiddle, or for the second fiddle, I need to somehow have it properly update all the nodes on exit(). I would say the second fiddle would be more natural to work with since the nodes are set out in a structured layout. i.e, each circle and it's corresponding text are in "g" tags just like what you would group in divs.
I've the following problem.
I wanna build a report with two bar graphs on the on the left side. The Graph should be above each other. On the other side of the page I wanna have two thin tables next to each other.
Now I have the problem that the second graph won't stay straight under the first graph. It always moves down to the position of the end of the tables If I've saved it.
How can I get the graph to stay in the position I placed in the Report builder.
Would be really nice if someone has answer?
Thanks in advance!
Place the Graphs inside a rectangle.
That should fix the problem.
Have a look at Report Design Tips (Report Builder and SSRS)
and more specifically the section on Designing Reports and Controlling the Rendering of Report Items on the Report Page