score:8
i believe this example on jsfiddle solves your problem.
the code is actually your example, just a little bit modified.
there is a new function wordwrap2() that takes care of proper splitting of the names:
function wordwrap2( str, width, brk, cut ) {
brk = brk || '\n';
width = width || 75;
cut = cut || false;
if (!str) { return str; }
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\s+?(\\s|$)');
return str.match( regexp(regex, 'g') ).join( brk );
}
then, there is a new important part of the code that, instead of just creating one text label per node, creates this:
var maxlength = 20;
var separation = 18;
var textx = 0;
nodeenter.append("text")
.attr("dy", "0.3em")
.each(function (d) {
var lines = wordwrap2(d.name, maxlength).split('\n');
console.log(d.name);
console.log(lines);
for (var i = 0; i < lines.length; i++) {
d3.select(this)
.append("tspan")
.attr("dy", separation)
.attr("x", textx)
.text(lines[i]);
}
});
(variable maxlength - length used for criterium for splitting names)
(variable separation - visual vertical distance between split lines of a name)
for example this would be the output for maxlength=20:
this would be the output for maxlength=15: (notice that aspect ratio banker became aspect ratio/banker)
this would be the output for maxlength=10: (now, check out aspect/ratio/banker !)
and this would be the output for maxlength=10 and separation=30 (a little more space between individual lines):
Source: stackoverflow.com
Related Query
- Breaking text from json into several lines for displaying labels in a D3 force layout
- Node generation from json data for force layout
- Breaking text into two lines inside circle in d3
- Importing data from JSON into D3 and displaying it on pie chart sections
- creating links for d3 force layout from json file
- Updating links on a force directed graph from dynamic json data
- Labels / text on the nodes of a D3 force directed graph
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- json representation for d3 force directed networks
- Creating hierarchical JSON from MySQL results and PHP for D3.js tree?
- how to add tooltip for rectangles in d3.js reading from json
- d3.js: Dual lines of text for each tick on an axis?
- selection.append / insert: d3 changes from v3 to v4 turns checkboxes into text fields
- Getting data at run time, from a text box for example
- How do I turn a piece of text into a parent children JSON file?
- add Y axis labels to D3 bar from json data name attribute
- d3js Force Directed Graph - Click on node to popup infobox which read from JSON
- Getting data from JSON for D3.js
- Lines for labels outside arc (Pie chart) d3.js
- How to read JSON data from same json for tree layout insteadof reading from other .JSON file?
- Why are my D3 force layout diagram lines extending into circles?
- How do I split labels for my donut chart to multiple lines using d3.js?
- reformatted data into JSON from CSV, can't get parsing right in D3
- trying to get MySQL data into nested json file for d3?
- Passing JS variable consisting of content from a JSON into d3.json function
- NetworkD3 Sankey Plot in R: How to switch text labels from the right to the left of the inner nodes only
- D3.js multiple force layout graphs from json file
- Colored text and line-breaks for D3 node labels
- Create multinested JSON from URL in Javascript for d3.js
- How to call JSON from a file instead of in-line for Multi-Edge D3 Example
More Query from same tag
- d3js tree chart not fitting on canvas
- crossfilter | animate through date range
- D3 repulsive forces on certain nodes
- Can I display D3 graphs on .epub?
- How to reject promise on d3 xhr request timeout?
- What is the type of a continuous numeric d3.scaleLinear() scale in typescript
- How to assign custom colors to bars in a D3.js bar chart?
- Using multiple values for a Crossfilter dimension
- Looping through JSON to grab geo-coordinates (d3 and leaflet)
- How can I fill gaps in a dc.js series chart?
- ExtJS application build fails: ReferenceError: d3 is not defined
- Use d3 stack layout with data organized per points, instead of per layers
- D3 Bounded Panning
- Select an element in contained DOM tree using d3.js
- Create nested output
- Can d3.js / JavaScript update a text value like in a chart?
- Converting D3.js CSS Styles to Inline Styles
- append circle to map in d3
- Render SVG to PNG using JavaScript
- Array of objects javascript
- Reload data from a drop down box created by script without having to delete the element and create another one
- webpack 4 and d3 es6 imports not working
- Conditional fill on multiple svg based on data
- How to center a List inside a D3 circle
- Why the graph lines are off axis Y and X?
- D3Node getComputedTextLength() is not a function
- How to create axisLeft dynamic in D3.js
- Setting svg fill attribute in Javascript
- How do I change symbol type colors on D3js?
- Injecting dynamically created components into dynamically created tree graph