force graph: centering the graph on a root node?
6,178 views
Skip to first unread message
Andy K
Dec 13, 2011, 7:59:03 PM12/13/11
to d3-js
Hi All,
I'm new to D3 and working on a project using the force-directed graph
to interactively traverse a data set.
I have a root node with N attached nodes, and each of those N nodes
will have M attached nodes (basically, a 2-level deep tree
structure). I know the graph is supposed to self-organize and settle
on a stable configuration based on its structure -- however, I'd like
to "force" the layout to symetrically center on the root node (i.e.,
have the root node always gravitate towards (width/2, height/2), and
the other nodes radiate out from it ), even though the weights of the
attached N nodes will vary considerably. Basically, I want to keep
the focus from being "stolen" by a heavy child node if the parent root
node is light/sparsely-linked.
Any suggestions on how to achieve this would be greatly appreciated
--
Thanks,
Andy
Mike Bostock
Dec 13, 2011, 11:25:35 PM12/13/11
to d3...@googlegroups.com
Try setting the `fixed` property on the root node to true, and assign
it a suitable position via the `x` and `y` properties (such as the
center of the layout).
it a suitable position via the `x` and `y` properties (such as the
center of the layout).
Mike
Andy K
Dec 14, 2011, 8:22:00 PM12/14/11
to d3-js
Thanks -- that worked, but was a bit too rigid for what I had in
mind. To keep the layout jiggling organically, I borrowed the
following from http://bl.ocks.org/1021953
mind. To keep the layout jiggling organically, I borrowed the
following from http://bl.ocks.org/1021953
force.on("tick", function(e) {
// soft-center the root node
var k = .01;
var nodes = force.nodes();
nodes[0].y += (h/2 - nodes[0].y) * k;
nodes[0].x += (w/2 - nodes[0].x) * k;
});
My next goal is to interactively add new nodes and link them to an
existing node in the layout. I realize I'm still struggling to
understand how d3, svg, and js all tie together in these examples, and
I don't have all of the basic concepts yet. I'm starting with the
"images & labels" example (http://bl.ocks.org/950642), and grabbing
code from other examples for the click/add function. Ideally, I want
to add new smileys & links to the graph, but I'm unable to get a
simple circle to link in. With the code below, a circle appears on
click at mouse (x,y), but a link isn't linked to the existing 4th node
in the layout (hardcoded as target: force.nodes[3]). I'm not really
sure how to select and append to the existing nodes and links arrays,
after they've been initialized. Any feedback would be appreciated --
svg.on("click", function() {
var point = d3.svg.mouse(this),
node = {x: point[0], y: point[1]};
var link = {source: node, target: force.nodes[3] || node};
svg.append("svg:circle")
.data([node])
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 1e-6)
.transition()
.ease(Math.sqrt)
.attr("r", 4.5);
force.nodes().push(node);
force.links().push(link);
console.log(force.nodes.length);
force.resume();
});
Mike Bostock
Dec 14, 2011, 8:27:37 PM12/14/11
to d3...@googlegroups.com
> force.nodes[3]
`force.nodes` is a function, not an array. You'll either need to keep
the array yourself (it appears as `var nodes` in many examples), or
call `force.nodes()` to retrieve the array, and then pull out the
fourth node using [3].
Mike
Andy Kalinowitsch
Dec 15, 2011, 5:14:23 PM12/15/11
to d3...@googlegroups.com
Thanks Mike, that did the trick.
I'm now able to add a node and link and have it appear in the layout -- however, it doesn't "join" the rest of the nodes and links (on click, the new node is drawn at the mouse, and the link is drawn to the current position of force.nodes() element 3, but both the new node and the new link then remain drawn statically while the rest of the layout continues to bounce around. I know I'm missing something really basic here ... can someone point me in the right direction?
<script type="text/javascript">
var w = 1280,
h = 800;
var force = d3.layout.force()
.charge(-240)
.linkDistance(80)
.size([w, h]);
var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:rect")
.attr("width", w)
.attr("height", h);
d3.json("miserables.json", function(json) {
var link = svg.selectAll("line")
.data(json.links)
.enter().append("svg:line");
var node = svg.selectAll("image")
.data(json.nodes)
.enter().append("svg:image")
.attr("xlink:href", "Kevin_Bacon.jpg")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "32px")
.attr("height", "32px")
.call(force.drag);
var label = svg.selectAll("text")
.data(json.nodes)
.enter().append("svg:text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
// Merge images and text for update.
node = svg.selectAll("image, text");
force
.nodes(json.nodes)
.links(json.links)
.on("tick", tick)
.start();
svg.on("click", function() {
var point = d3.svg.mouse(this),
newnode = {x: point[0], y: point[1], group: 3},
nodes = force.nodes();
var link = {source: newnode, target: nodes[3], value: 5}
svg.insert("svg:line", "circle")
.data([link])
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
svg.append("svg:image")
.data([newnode])
.attr("xlink:href", "Kevin_Bacon.jpg")
.attr("x", point[0])
.attr("y", point[1])
.attr("width", "32px")
.attr("height", "32px");
force.nodes().push(newnode);
force.links().push(link);
console.log(nodes.length);
force.start();
});
function tick() {
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}
});
</script>
I'm now able to add a node and link and have it appear in the layout -- however, it doesn't "join" the rest of the nodes and links (on click, the new node is drawn at the mouse, and the link is drawn to the current position of force.nodes() element 3, but both the new node and the new link then remain drawn statically while the rest of the layout continues to bounce around. I know I'm missing something really basic here ... can someone point me in the right direction?
<script type="text/javascript">
var w = 1280,
h = 800;
var force = d3.layout.force()
.charge(-240)
.linkDistance(80)
.size([w, h]);
var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:rect")
.attr("width", w)
.attr("height", h);
d3.json("miserables.json", function(json) {
var link = svg.selectAll("line")
.data(json.links)
.enter().append("svg:line");
var node = svg.selectAll("image")
.data(json.nodes)
.enter().append("svg:image")
.attr("xlink:href", "Kevin_Bacon.jpg")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "32px")
.attr("height", "32px")
.call(force.drag);
var label = svg.selectAll("text")
.data(json.nodes)
.enter().append("svg:text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
// Merge images and text for update.
node = svg.selectAll("image, text");
force
.nodes(json.nodes)
.links(json.links)
.on("tick", tick)
.start();
svg.on("click", function() {
var point = d3.svg.mouse(this),
nodes = force.nodes();
var link = {source: newnode, target: nodes[3], value: 5}
svg.insert("svg:line", "circle")
.data([link])
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
svg.append("svg:image")
.data([newnode])
.attr("xlink:href", "Kevin_Bacon.jpg")
.attr("x", point[0])
.attr("y", point[1])
.attr("width", "32px")
.attr("height", "32px");
force.nodes().push(newnode);
force.links().push(link);
console.log(nodes.length);
force.start();
});
function tick() {
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}
});
</script>
Mike Bostock
Dec 15, 2011, 5:36:05 PM12/15/11
to d3...@googlegroups.com
You need to reselect `node` and `link`. Those selections are only
initialized when you first create the force layout, and you need to
reselect if you want to update the elements you add later.
initialized when you first create the force layout, and you need to
reselect if you want to update the elements you add later.
Mike
Andy Kalinowitsch
Dec 17, 2011, 5:57:56 PM12/17/11
to d3...@googlegroups.com
Thanks, Mike. I tweaked the gravity-charge example to interactively add new and linked nodes & think I understand those basics, but now I have questions about a few other issues:
1. I'm still not sure how to attach text to the node and have it move/transform with the circle. I tried node = svg.selectAll("circle, text"); before nodes.push(), (commented below) but this causes a "cannot call method 'push' of undefined" error.
2. The svg.click event adds a new node, and the node click event adds a linked node to the clicked node -- however, clicking on a node also triggers the svg click (and adds two nodes). Is there a way to avoid this?
Thanks,
Andy
var w = 1280,
h = 800;
var force = d3.layout.force()
.gravity(.04)
.charge(-25)
.linkDistance(30)
.linkStrength(3)
.size([w, h]);
var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:rect")
.attr("width", w)
.attr("height", h);
var p0;
var nodes = force.nodes();
force.on("tick", function() {
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
svg.selectAll("line")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node = {x: p1[0], y: p1[1], px: (p0 || (p0 = p1))[0], py: p0[1]},
r = Math.floor(Math.random() * (nodes.length - 1)),
link = {source: node, target: nodes[r] || node},
cr = Math.floor(Math.random() * 10),
cg = Math.floor(Math.random() * 10),
cb = Math.floor(Math.random() * 10),
color = "#" + cr + cg + cb,
p0 = p1;
svg.append("svg:circle")
.data([node])
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 7.5)
.style("stroke", "#000")
.style("fill", color)
.on("click", clack)
.call(force.drag);
force.nodes().push(node);
force.start();
});
function clack(d) {
var p1 = d3.svg.mouse(this),
node = {x: p1[0], y: p1[1], px: (p0 || (p0 = p1))[0], py: p0[1]},
link = {source: node, target: nodes[d.index] || node},
cr = Math.floor(Math.random() * 10),
cg = Math.floor(Math.random() * 10),
cb = Math.floor(Math.random() * 10),
color = "#" + cr + cg + cb,
p0 = p1;
svg.insert("svg:line", "circle")
.data([link])
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
.style("stroke", "#000")
.style("fill", color)
.on("click", clack)
.call(force.drag);
svg.append("svg:text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("x", p1[0])
.attr("y", p1[1])
text("Test text");
// Merge images and text for update.
//node = svg.selectAll("circle, text");
force.nodes().push(node);
force.links().push(link);
force.start();
1. I'm still not sure how to attach text to the node and have it move/transform with the circle. I tried node = svg.selectAll("circle, text"); before nodes.push(), (commented below) but this causes a "cannot call method 'push' of undefined" error.
2. The svg.click event adds a new node, and the node click event adds a linked node to the clicked node -- however, clicking on a node also triggers the svg click (and adds two nodes). Is there a way to avoid this?
Thanks,
Andy
var w = 1280,
h = 800;
var force = d3.layout.force()
.charge(-25)
.linkDistance(30)
.linkStrength(3)
.size([w, h]);
var svg = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
svg.append("svg:rect")
.attr("width", w)
.attr("height", h);
var nodes = force.nodes();
force.on("tick", function() {
svg.selectAll("circle")
.attr("cx", function(d) { return d.x; })
svg.selectAll("line")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
});
svg.on("click", function() {
var p1 = d3.svg.mouse(this),svg.on("click", function() {
node = {x: p1[0], y: p1[1], px: (p0 || (p0 = p1))[0], py: p0[1]},
r = Math.floor(Math.random() * (nodes.length - 1)),
link = {source: node, target: nodes[r] || node},
cr = Math.floor(Math.random() * 10),
cg = Math.floor(Math.random() * 10),
cb = Math.floor(Math.random() * 10),
color = "#" + cr + cg + cb,
p0 = p1;
svg.append("svg:circle")
.data([node])
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.style("stroke", "#000")
.style("fill", color)
.on("click", clack)
.call(force.drag);
force.nodes().push(node);
force.start();
});
function clack(d) {
var p1 = d3.svg.mouse(this),
node = {x: p1[0], y: p1[1], px: (p0 || (p0 = p1))[0], py: p0[1]},
link = {source: node, target: nodes[d.index] || node},
cr = Math.floor(Math.random() * 10),
cg = Math.floor(Math.random() * 10),
cb = Math.floor(Math.random() * 10),
color = "#" + cr + cg + cb,
p0 = p1;
svg.insert("svg:line", "circle")
.data([link])
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
svg.append("svg:circle")
.data([node])
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 7.5).data([node])
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.style("stroke", "#000")
.style("fill", color)
.on("click", clack)
.call(force.drag);
svg.append("svg:text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("y", p1[1])
text("Test text");
// Merge images and text for update.
force.nodes().push(node);
force.links().push(link);
force.start();
SivaSankari Murugesan
Jan 5, 2015, 5:03:44 AM1/5/15
to d3...@googlegroups.com
hi,
i want to create the node dynamically using d3.js...can anyone help me??
Thanks,
SivaSankari
SivaSankari Murugesan
Jan 5, 2015, 5:15:20 AM1/5/15
to d3...@googlegroups.com
hi,
i am new to d3. how to create dynamic nodes and links in d3.js. i tried many times...but no use... can anyone help me??
thanks,
SivaSankari
SivaSankari Murugesan
Jan 6, 2015, 12:52:52 AM1/6/15
to d3...@googlegroups.com
hi andy,
expand.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: black;
stroke-width: 1.5px;
}
.node text {
font: 15px sans-serif;
}
.link {
fill: none;
stroke: yellow;
stroke-width: 3px;
}
</style>
<body>
<script src="d3.min.js"></script>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 300},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("flare.json", function(error, flare) {
root = flare;
root.x0 = height / 2;
root.y0 = 0;
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
});
d3.select(self.frameElement).style("height", "800px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = svg.selectAll("g.node")
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue\n\
" : "#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.name; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "red" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
</script>
flare.json
{
"name": "flare",
"children": [{
"name": "analytics",
"children": [{
"name": "cluster",
"children": [{
"name": "AgglomerativeCluster",
"size": 3938
}, {
"name": "CommunityStructure",
"size": 3812
}, {
"name": "HierarchicalCluster",
"size": 6714
}, {
"name": "MergeEdge",
"size": 743
}]
}, {
"name": "graph",
"children": [{
"name": "BetweennessCentrality",
"size": 3534
}, {
"name": "LinkDistance",
"size": 5731
}, {
"name": "MaxFlowMinCut",
"size": 7840
}, {
"name": "ShortestPaths",
"size": 5914
}, {
"name": "SpanningTree",
"size": 3416
}]
}, {
"name": "optimization",
"children": [{
"name": "AspectRatioBanker",
"size": 7074
}]
}]
}, {
"name": "animate",
"children": [{
"name": "Easing",
"size": 17010
}, {
"name": "FunctionSequence",
"size": 5842
}, {
"name": "interpolate",
"children": [{
"name": "ArrayInterpolator",
"size": 1983
}, {
"name": "ColorInterpolator",
"size": 2047
}, {
"name": "DateInterpolator",
"size": 1375
}, {
"name": "Interpolator",
"size": 8746
}, {
"name": "MatrixInterpolator",
"size": 2202
}, {
"name": "NumberInterpolator",
"size": 1382
}, {
"name": "ObjectInterpolator",
"size": 1629
}, {
"name": "PointInterpolator",
"size": 1675
}, {
"name": "RectangleInterpolator",
"size": 2042
}]
}, {
"name": "ISchedulable",
"size": 1041
}, {
"name": "Parallel",
"size": 5176
}, {
"name": "Pause",
"size": 449
}, {
"name": "Scheduler",
"size": 5593
}, {
"name": "Sequence",
"size": 5534
}, {
"name": "Transition",
"size": 9201
}, {
"name": "Transitioner",
"size": 19975
}, {
"name": "TransitionEvent",
"size": 1116
}, {
"name": "Tween",
"size": 6006
}]
}, {
"name": "data",
"children": [{
"name": "converters",
"children": [{
"name": "Converters",
"size": 721
}, {
"name": "DelimitedTextConverter",
"size": 4294
}, {
"name": "GraphMLConverter",
"size": 9800
}, {
"name": "IDataConverter",
"size": 1314
}, {
"name": "JSONConverter",
"size": 2220
}]
}, {
"name": "DataField",
"size": 1759
}, {
"name": "DataSchema",
"size": 2165
}, {
"name": "DataSet",
"size": 586
}, {
"name": "DataSource",
"size": 3331
}, {
"name": "DataTable",
"size": 772
}, {
"name": "DataUtil",
"size": 3322
}]
}, {
"name": "display",
"children": [{
"name": "DirtySprite",
"size": 8833
}, {
"name": "LineSprite",
"size": 1732
}, {
"name": "RectSprite",
"size": 3623
}, {
"name": "TextSprite",
"size": 10066
}]
}, {
"name": "flex",
"children": [{
"name": "FlareVis",
"size": 4116
}]
}, {
"name": "physics",
"children": [{
"name": "DragForce",
"size": 1082
}, {
"name": "GravityForce",
"size": 1336
}, {
"name": "IForce",
"size": 319
}, {
"name": "NBodyForce",
"size": 10498
}, {
"name": "Particle",
"size": 2822
}, {
"name": "Simulation",
"size": 9983
}, {
"name": "Spring",
"size": 2213
}, {
"name": "SpringForce",
"size": 1681
}]
}, {
"name": "query",
"children": [{
"name": "AggregateExpression",
"size": 1616
}, {
"name": "And",
"size": 1027
}, {
"name": "Arithmetic",
"size": 3891
}, {
"name": "Average",
"size": 891
}, {
"name": "BinaryExpression",
"size": 2893
}, {
"name": "Comparison",
"size": 5103
}, {
"name": "CompositeExpression",
"size": 3677
}, {
"name": "Count",
"size": 781
}, {
"name": "DateUtil",
"size": 4141
}, {
"name": "Distinct",
"size": 933
}, {
"name": "Expression",
"size": 5130
}, {
"name": "ExpressionIterator",
"size": 3617
}, {
"name": "Fn",
"size": 3240
}, {
"name": "If",
"size": 2732
}, {
"name": "IsA",
"size": 2039
}, {
"name": "Literal",
"size": 1214
}, {
"name": "Match",
"size": 3748
}, {
"name": "Maximum",
"size": 843
}, {
"name": "methods",
"children": [{
"name": "add",
"size": 593
}, {
"name": "and",
"size": 330
}, {
"name": "average",
"size": 287
}, {
"name": "count",
"size": 277
}, {
"name": "distinct",
"size": 292
}, {
"name": "div",
"size": 595
}, {
"name": "eq",
"size": 594
}, {
"name": "fn",
"size": 460
}, {
"name": "gt",
"size": 603
}, {
"name": "gte",
"size": 625
}, {
"name": "iff",
"size": 748
}, {
"name": "isa",
"size": 461
}, {
"name": "lt",
"size": 597
}, {
"name": "lte",
"size": 619
}, {
"name": "max",
"size": 283
}, {
"name": "min",
"size": 283
}, {
"name": "mod",
"size": 591
}, {
"name": "mul",
"size": 603
}, {
"name": "neq",
"size": 599
}, {
"name": "not",
"size": 386
}, {
"name": "or",
"size": 323
}, {
"name": "orderby",
"size": 307
}, {
"name": "range",
"size": 772
}, {
"name": "select",
"size": 296
}, {
"name": "stddev",
"size": 363
}, {
"name": "sub",
"size": 600
}, {
"name": "sum",
"size": 280
}, {
"name": "update",
"size": 307
}, {
"name": "variance",
"size": 335
}, {
"name": "where",
"size": 299
}, {
"name": "xor",
"size": 354
}, {
"name": "_",
"size": 264
}]
}, {
"name": "Minimum",
"size": 843
}, {
"name": "Not",
"size": 1554
}, {
"name": "Or",
"size": 970
}, {
"name": "Query",
"size": 13896
}, {
"name": "Range",
"size": 1594
}, {
"name": "StringUtil",
"size": 4130
}, {
"name": "Sum",
"size": 791
}, {
"name": "Variable",
"size": 1124
}, {
"name": "Variance",
"size": 1876
}, {
"name": "Xor",
"size": 1101
}]
}, {
"name": "scale",
"children": [{
"name": "IScaleMap",
"size": 2105
}, {
"name": "LinearScale",
"size": 1316
}, {
"name": "LogScale",
"size": 3151
}, {
"name": "OrdinalScale",
"size": 3770
}, {
"name": "QuantileScale",
"size": 2435
}, {
"name": "QuantitativeScale",
"size": 4839
}, {
"name": "RootScale",
"size": 1756
}, {
"name": "Scale",
"size": 4268
}, {
"name": "ScaleType",
"size": 1821
}, {
"name": "TimeScale",
"size": 5833
}]
}, {
"name": "util",
"children": [{
"name": "Arrays",
"size": 8258
}, {
"name": "Colors",
"size": 10001
}, {
"name": "Dates",
"size": 8217
}, {
"name": "Displays",
"size": 12555
}, {
"name": "Filter",
"size": 2324
}, {
"name": "Geometry",
"size": 10993
}, {
"name": "heap",
"children": [{
"name": "FibonacciHeap",
"size": 9354
}, {
"name": "HeapNode",
"size": 1233
}]
}, {
"name": "IEvaluable",
"size": 335
}, {
"name": "IPredicate",
"size": 383
}, {
"name": "IValueProxy",
"size": 874
}, {
"name": "math",
"children": [{
"name": "DenseMatrix",
"size": 3165
}, {
"name": "IMatrix",
"size": 2815
}, {
"name": "SparseMatrix",
"size": 3366
}]
}, {
"name": "Maths",
"size": 17705
}, {
"name": "Orientation",
"size": 1486
}, {
"name": "palette",
"children": [{
"name": "ColorPalette",
"size": 6367
}, {
"name": "Palette",
"size": 1229
}, {
"name": "ShapePalette",
"size": 2059
}, {
"name": "SizePalette",
"size": 2291
}]
}, {
"name": "Property",
"size": 5559
}, {
"name": "Shapes",
"size": 19118
}, {
"name": "Sort",
"size": 6887
}, {
"name": "Stats",
"size": 6557
}, {
"name": "Strings",
"size": 22026
}]
}, {
"name": "vis",
"children": [{
"name": "axis",
"children": [{
"name": "Axes",
"size": 1302
}, {
"name": "Axis",
"size": 24593
}, {
"name": "AxisGridLine",
"size": 652
}, {
"name": "AxisLabel",
"size": 636
}, {
"name": "CartesianAxes",
"size": 6703
}]
}, {
"name": "controls",
"children": [{
"name": "AnchorControl",
"size": 2138
}, {
"name": "ClickControl",
"size": 3824
}, {
"name": "Control",
"size": 1353
}, {
"name": "ControlList",
"size": 4665
}, {
"name": "DragControl",
"size": 2649
}, {
"name": "ExpandControl",
"size": 2832
}, {
"name": "HoverControl",
"size": 4896
}, {
"name": "IControl",
"size": 763
}, {
"name": "PanZoomControl",
"size": 5222
}, {
"name": "SelectionControl",
"size": 7862
}, {
"name": "TooltipControl",
"size": 8435
}]
}, {
"name": "data",
"children": [{
"name": "Data",
"size": 20544
}, {
"name": "DataList",
"size": 19788
}, {
"name": "DataSprite",
"size": 10349
}, {
"name": "EdgeSprite",
"size": 3301
}, {
"name": "NodeSprite",
"size": 19382
}, {
"name": "render",
"children": [{
"name": "ArrowType",
"size": 698
}, {
"name": "EdgeRenderer",
"size": 5569
}, {
"name": "IRenderer",
"size": 353
}, {
"name": "ShapeRenderer",
"size": 2247
}]
}, {
"name": "ScaleBinding",
"size": 11275
}, {
"name": "Tree",
"size": 7147
}, {
"name": "TreeBuilder",
"size": 9930
}]
}, {
"name": "events",
"children": [{
"name": "DataEvent",
"size": 2313
}, {
"name": "SelectionEvent",
"size": 1880
}, {
"name": "TooltipEvent",
"size": 1701
}, {
"name": "VisualizationEvent",
"size": 1117
}]
}, {
"name": "legend",
"children": [{
"name": "Legend",
"size": 20859
}, {
"name": "LegendItem",
"size": 4614
}, {
"name": "LegendRange",
"size": 10530
}]
}, {
"name": "operator",
"children": [{
"name": "distortion",
"children": [{
"name": "BifocalDistortion",
"size": 4461
}, {
"name": "Distortion",
"size": 6314
}, {
"name": "FisheyeDistortion",
"size": 3444
}]
}, {
"name": "encoder",
"children": [{
"name": "ColorEncoder",
"size": 3179
}, {
"name": "Encoder",
"size": 4060
}, {
"name": "PropertyEncoder",
"size": 4138
}, {
"name": "ShapeEncoder",
"size": 1690
}, {
"name": "SizeEncoder",
"size": 1830
}]
}, {
"name": "filter",
"children": [{
"name": "FisheyeTreeFilter",
"size": 5219
}, {
"name": "GraphDistanceFilter",
"size": 3165
}, {
"name": "VisibilityFilter",
"size": 3509
}]
}, {
"name": "IOperator",
"size": 1286
}, {
"name": "label",
"children": [{
"name": "Labeler",
"size": 9956
}, {
"name": "RadialLabeler",
"size": 3899
}, {
"name": "StackedAreaLabeler",
"size": 3202
}]
}, {
"name": "layout",
"children": [{
"name": "AxisLayout",
"size": 6725
}, {
"name": "BundledEdgeRouter",
"size": 3727
}, {
"name": "CircleLayout",
"size": 9317
}, {
"name": "CirclePackingLayout",
"size": 12003
}, {
"name": "DendrogramLayout",
"size": 4853
}, {
"name": "ForceDirectedLayout",
"size": 8411
}, {
"name": "IcicleTreeLayout",
"size": 4864
}, {
"name": "IndentedTreeLayout",
"size": 3174
}, {
"name": "Layout",
"size": 7881
}, {
"name": "NodeLinkTreeLayout",
"size": 12870
}, {
"name": "PieLayout",
"size": 2728
}, {
"name": "RadialTreeLayout",
"size": 12348
}, {
"name": "RandomLayout",
"size": 870
}, {
"name": "StackedAreaLayout",
"size": 9121
}, {
"name": "TreeMapLayout",
"size": 9191
}]
}, {
"name": "Operator",
"size": 2490
}, {
"name": "OperatorList",
"size": 5248
}, {
"name": "OperatorSequence",
"size": 4190
}, {
"name": "OperatorSwitch",
"size": 2581
}, {
"name": "SortOperator",
"size": 2023
}]
}, {
"name": "Visualization",
"size": 16540
}]
}]
}
the above code creates tree...thats okay...but how do I dynamically create such nodes on user's double click?
Also i need the code about how to link the created node to an existing node in the layout.
Thanks,
SivaSankari
Reply all
Reply to author
Forward
0 new messages