score:1
updated: now takes into account children that aren't shown, using the idea from @gilsha's answer.
sure, you can set each <circle>
's radius proportional to the number of children they have:
node.select("circle")
.attr("r", function(d){
var numkids = 0;
if (d.children) numkids += d.children.length;
if (d._children) numkids += d._children.length;
return 10 * (numkids + 1);
})
where r
is some radius. using r=10
and toggling on the "wafer"
node, you get this:
score:1
for a complete solution, you'll actually want to use a recursive function to first calculate the total children (not just first-level children) of each node. for example:
var bubble_up_total_children = function(node) {
var child, _i, _len, _ref;
if (node.children && node.children.length > 0) {
_ref = node.children;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
child = _ref[_i];
bubble_up_total_children(child);
}
node.total_children = node.children.length + node.children.reduce(function(a, b) {
return a.total_children + b.total_children;
});
} else {
node.total_children = 0;
}
};
bubble_up_total_children(root);
from there you can now use d3.scale as already documented in @gilsha's answer to calculate size based on the new total_children
attribute on each node.
score:8
you can use d3.scale.linear
for calculating radius of nodes proportional to the number of children. d3.scale
also helps to find a radius in between a range. here is the updated fiddle
var minradius = 10;
var maxradius = 15;
var scale = d3.scale.linear().range([minradius,maxradius]);
nodeenter.append("circle")
.attr("r", function(d) {
if(d.children)
return scale(d.children.length);
else if(d._children)
return scale(d._children.length);
else
return minradius;
});
Source: stackoverflow.com
Related Query
- Node size proportional to number of children in D3
- Root node size to take sum of children nodes size when collapsed
- D3 javascript network: How to parametrize node size with the number of links?
- Trying multiple approaches to make the node size of a force directed graph proportional to it's degree
- How do I remove all children elements from a node and then apply them again with different color and size?
- D3 Tree Layout - Custom Vertical Layout when children exceed more than a certain number
- D3 Node radius depends on number of links : weight property
- Svg image representing a node, varying node size in a force-directed graph
- Removing node and its children from d3js tree layout
- using CSV property to set link length, node size d3
- d3 hierarchy ability to average children node values
- selection.join behavior when each node has children
- D3 force layout by node size
- How to align graph with respective rectangle node size in d3 js
- d3.js: size of parents = sum of size of children
- D3 Force - creating markers for links with dynamic refX to reflect varying node size
- Sankey D3.JS return a negative value for node size
- Select the children of a node from a tree in d3.js
- d3.js size node based on label text
- Determining nested depth to assign size of node D3.js
- A function in d3.js to create start and end nodes and node and link texts from a JSON source of varying size
- Drawing a radial tree from node and edges rather than children
- D3 pack: setting same radius for the nodes that include the different number of children
- Split children in n th rows specific number of children par each row
- How to adjust node size based on value in diagonalNetwork of networkD3
- d3.js force directed graph: How to make node size depends on the value of the links?
- Displaying number of children in collapse tree
- D3 Tree: How to make children checked and disabled recursively when the parent node is checked
- In d3.js how to vary the node size of tree diagram
- D3 v4 drag/drop tree node into new parents children
More Query from same tag
- D3 parcoords axis scale not updating correctly
- How to select nested data elements in d3
- Edit the data in a pie chart rather than create a new one
- Arrow marker shaded in SVG d3
- Zoomable network graph in AngularJS
- appending to group not working in d3 js
- Is it possible to append text to a text element in SVG?
- How to arrange dates in a drop-down list according their natural way using D3.js
- Horizontal bar chart d3.js not showing label
- In d3.js map, points are hidden behind other features
- Wrapping text labels
- d3 js tree layout multiple parents
- d3/Javascript animations are not playing when they should be
- How to get d3 instance from d3 selection?
- d3 - create multi column data dynamically using d3
- How to add jitter to avoid overplot in D3?
- How to put a legend in a pie chart in d3.js
- D3 circle element remains when mouse over on data update
- D3 outdated links still visible
- override extent for one horizon instance
- Hide the transformation of the graph in the beginning
- Assign distinct color to each row in a heat map
- d3 break line graph if no data
- how to use moment and date time in D3
- How to efficiently cluster small squares into larger square grids
- Hiding a tooltip with transition in d3
- D3 processes a stacked bar chart wrong
- D3 show segment of series data
- D3.js how to transition in opposite direction with basic SVG elements
- issue with d3 projection albers producing checkered map