I am trying to use D3 v4 to create a series of bubbles, each containing one smaller child element. Working off this circle pack example, and using the FlareVis bubble in the lower right as a reference since it only has one child.
I have changed part of the csv to read:
flare.flex,18000
flare.flex.FlareVis,2116
By giving the parent bubble a value I hoped that it would be resized independent of the value of it's child.
Instead the parent bubble seems to be calculated based only on the value of the child, even though the tooltip shows the parent's value as seen in the following image. What can I change in the code so that it calculates the parent's value?
Note: I am not trying to use padding to make the parent larger as both the parent and the child elements will each have separate values.
I appreciate the help.
Related
I am using mxgraph javascript library. Scenario: one swim lane is added to the graph. Any shapes can be added as a child to the swimlane (drag and drop).We can add 'n' number of childs . how to make the swimlane size fixed irrespective of number of childs .When i insert more child vertex in different places, parent mxcell size getting changed.
expected child as below:
Tried with extendParentsOnAdd/autoextend property. Objects in child are overlap on each other as below
I suggest you to give a try to the mxgraph.extendParentsOnAdd property which seems to configure exactly what you are looking for:
https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.extendParentsOnAdd and set it to false
Specifies if parents should be extended according to the extendParents
switch if cells are added. Default is true.
You may also have to configure https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.extendParents
Specifies if a parent should contain the child bounds after a resize
of the child. Default is true. This has precedence over
constrainChildren.
There are also other configuration properties about auto extend, like
https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxGraph-js.html#mxGraph.autoExtend (this one is generally useful at graph load time when you provide the intial graph definition)
Notice that this question seems very close to Set mxgraph cell only draggable within the canvas width
hello i have a spinning parent object containing a bunch of child objects. theese child objects are programmed to move on based on the cursor. however the x and y coordinates are completely relative to the spinning parent object. so whenever i want the child to move left-"-x relative to the world coordinates" it moves "-x relative to its parents coordinates"
image of what i have and want
i dont believe deataching the child from the parent will do in my situation...
i think the best approach is if its possible to calculate the direction i want from the objects local coordinates, but i dont really know hence im asking
picture of actual object / "chieldren"
I suggest you do the following:
Detach the child from its parent with scene.attach( child );
Perform the transformation in world space
Attach the object back to its parent via parent.attach( child );
The important bit here is the usage of Object3D.attach().
three.js R114
I'm using d3 to create an Org Chart, which has some nodes with longer names.
I've managed to modify the width of longer nodes, but have trouble properly placing their children and the lines (paths) to their children.
I tried calculating myself with determineChildXValue(), but that didn't work properly.
Is there a way to initialize the tree with variable widths so it will take care of the calculations of translations for child nodes?
Currently, I'm initializing it with hard-coded node sizes:
var tree = d3.layout.tree().nodeSize([70, 40]);
I've replicated the behavior in this example - expand Departments, then DEPARTMENT STORES to see the overlap.
Thanks in advance!
I consulted a colleague who was able to build a proper fix:
Define the source and target properties (before the projection is set) for the diagonal (paths)
Track the tierDisplacementX and cumulativeDisplacementX
Use these when translating the positions of the child nodes and their paths
See this fiddle to see the working code.
Is it possible to move any elements added using
chart.renderer
as we update the range or the navigator handles?
There is a square in this fiddle. Can we shift its position as we update the navigator?
Or can you point me to the function in the source code that can help?
Thanks
Update: i want to draw trendlines/ fibonnacci retracements etc. based on user events. Currently, i draw & drag the lines using chart.renderer until the mouseup event, calculate the x,y values of the end points, delete the rendered lines & then add new series which visually imitate those rendered lines. This is surely not the best solution. The issue is how to remember the position of the user selection & show/scale the same only when those lines are in the visible range.
So i am wondering if we could directly use some internal "scaling" function that calculates the visible points of the series based on the current extremes.
Rendered object's position is basend on pixels, so when you use navigator, pixels "are the same" so object stay in the same position. But you can catch navigator "sliding" by setExtremes and aftersetExtremes functions and then move element by translate().
Simple example of using translate():
obj.translate(120,20);
http://jsfiddle.net/Ne7QV/1/
Only what you need is common both elements, according to your expectations.
I'm using Raphael.js to produce an SVG drawing from Javascript (actually Coffeescript)
However, I'd like to be able to include subdrawings, automatically scaled, by putting them inside a second <svg> tag nested inside the first. Unfortunately the Raphael Paper object which allows me to add rects and paths etc. doesn't have an option for adding svgs.
I've tried to add the tag directly to the DOM in javascript with the following code :
res = document.createElement("svg")
res.setAttribute("x",x)
res.setAttribute("y",y)
res.setAttribute("width",width)
res.setAttribute("height",height)
res.setAttribute("viewBox","0 0 100 100")
res.innerHTML = someInnerSVG
#paper.canvas.appendChild(res)
This seems to update the DOM as expected, adding my new SVG tag as a child of the main outer SVG. However, nothing in this inner actually appears on the screen. (My inner SVG path is scaled within 0 0 100 100 so is within the viewBox.)
The rest of the drawing in the outer SVG, as produced by Raphael, is visible. But nothing of the inner one is.
Should what I'm trying be possible? Any idea what I'm doing wrong?
You should place these sub elements into a Raphael set. From there, you will be able to apply transformations to the set. To transform the set, you would call the transform() method and use the s attribute:
set.transform('s[sx],[sy]');
Where sx is the horizontal scale amount and sy is the vertical scale amount. Remove the brackets when you insert the numbers.
Please refer to the documentation here: http://raphaeljs.com/reference.html#Element.transform
The methods for elements apply to sets because sets are pseudo elements.