I'm facing an issue with long text strings in my D3 tree. The nodes move according to the tree structure, but how can I handle excessively long node-text?
For instance, if the label "T-ALL" had a longer name, it could overlap with the neighboring node's text, rendering both unreadable.
Below is the snippet of source code I'm using to draw the tree:
function drawTree(source) {
vis.selectAll(".graphTitle")
.transition().duration(800)
.attr("x", w/2-100)
.attr("y", -100)
.style("text-anchor", "middle")
.style("font-size", "16")
.style("font-family", "'Hoefler Text', Georgia, 'Times New Roman', serif")
.style("font-weight", "bold")
.transition().duration(700)
.attr("x", w/2-100)
.attr("y", 0)
.text(getCurrentGene());
var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 60; });
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); drawTree(d); });
nodeEnter.append("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return "#fff"; });
nodeEnter.append("svg: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);
// ... (rest of the code)
Any assistance would be greatly appreciated