score:3
Accepted answer
first, after the work inside wrap()
is done, you need to store the resulting height on the datum of the text: d.height = 19 * (linenumber + 1);
. that way, the height becomes available to whatever needs it. for example, you can use that to set the rect
height from outside of wrap()
instead of the parentnode.children[0]
thing, which is better separation of concerns. anyway, this is what wrap()
ends up being:
function wrap(text, width) {
text.each(function (d) { // diff add param d
var text = d3.select(this),
// diff: use datum to get name, instead of element text
words = d.name.split(/\s+/).reverse(),
word,
line = [],
linenumber = 0,
lineheight = 1.1, // ems
y = text.attr("y"),
dy = parsefloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getcomputedtextlength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++linenumber * lineheight + dy + "em").text(word);
}
}
// diff: store the height via the datum, d
d.height = 19 * (linenumber + 1);
d3.select(this.parentnode.children[0]).attr('height', 19 * (linenumber + 1));
});
}
});
now that you have d.height
you can use it to calculate the necessary offsets of the diagonal's endpoints.
// calculate source and target offsets
// d.height gets set by the wrap() function
var diagonal = d3.svg.diagonal()
.source(function (d) {
return {
"x": d.source.x + d.source.height / 2,
"y": d.source.y + 150
};
})
.target(function (d) {
return {
"x": d.target.x + d.target.height / 2,
"y": d.target.y
};
})
.projection(function (d) { return [d.y + 0, d.x + 0];
});
see modified fiddle
Source: stackoverflow.com
Related Query
- Append links to side of rectangles in D3 tree layout
- is it possible to draw dashed links only for child to child nodes of tree layout in d3 js
- d3.js: modifyng links in a tree layout
- d3.js: how to offset starting and ending points in links in tree layout
- Setting Max Length of Links in D3 Tree Layout
- How to generate links towards right side in force layout D3.js
- Adding marker on d3 tree layout links
- D3: Directional graph similar to tree layout but with back links
- d3 tree layout to display text on mouse hover over links
- Find co-ordinates of end point of links in d3 tree layout
- Using different classes for different links in d3 js in tree layout
- How to add text only on one side of the tree links
- Place label beside links on collapsible d3 tree layout
- Tree Layout - Links - Data Formatting
- d3.js Tree Layout - Cross Links
- Adding text to links that is represented in a JSON list - D3.js tree layout
- D3 Tree Layout Separation Between Nodes using NodeSize
- Simple graph of nodes and links without using force layout
- Dynamically resize the d3 tree layout based on number of childnodes
- d3.js: "Cannot read property 'weight' of undefined" when manually defining both nodes and links for force layout
- How do I create a tree layout using JSON data in d3.v4 - without stratify()
- arrows on links in d3js force layout
- Graph with auto layout using d3 (a tree with multiple parent nodes)
- D3.js Adding links between elements in a radial tree (Hierarchical edge bundling elements)
- Increasing gap between nodes of my D3 tree layout
- Tree with children towards multiple side in d3.js (similar to family tree)
- d3 (v4) tree layout and typescript: Property 'x' does not exist on type 'HierarchyNode<IOrgChartNode>'
- D3 Tree layout visualization - Inherit child with multiple parents
- How to change orientation of a D3 tree layout by 90 degrees
- Search for an element in D3 - force layout or tree
More Query from same tag
- D3 - multi line chart, line position offset
- Angular ng-click's inside a dynamically created d3 chart are not working
- How to load two external files in D3?
- How to animate transition over grouped, nested json coordinate data with D3.js?
- Plotting a Histogram in D3 without knowing number of bins
- Parent css transform affecting d3.mouse points
- Charge based on size - d3 force layout
- Typescript, D3 and powerBI: How do i get typescript to talk to D3 v4?
- no graph output for d3.js
- How do I externalize my d3 v4 pie chart labels?
- d3 liquid chart bugs - clipping path jarring
- How to Create different kinds of grid lines using D3 in the same graph
- Implement discontinuous bar chart with D3.js
- Why are both of these lines coming up the same color?
- Hide more than one json d3 group
- hover effects with dagre / dagre-d3 / d3.js
- D3 animate donut chart while updating it with different data length
- Adding CSV to ASP.NET Web Application
- Adding new nodes to a clustered force layout
- How so create complex SVG shapes using D3JS?
- Processing JSON data with D3
- How to update the scattergraph?
- Replace d3.select and onchange function with Jquery
- Only one D3 Visualization is showing up on my page?
- Why is my D3 zoom transform not centering properly?
- Why d3 removes data during second update
- D3 - stack function bar chart filter
- Displaying both text and data from db in a tooltip d3
- d3js update and maintain structure of visualization
- change initial zoom in D3.js node graph