I have a hierarchy layout as shown in the image below where the 3rd layer of nodes contains words that are quite long so I want to give these nodes more space to their left to make it easier to read. But I am not sure what to change to do so.
Code for the node, path and the text:
const root = hierarchy(investmentByLocationData).sort(
(a, b) =>
descending(a.height, b.height) || ascending(a.data.name, b.data.name)
);
root.dx = 12;
root.dy = width / (root.height + 1);
cluster().nodeSize([root.dx, root.dy])(root);
const linkGenerator = linkHorizontal()
.x((node) => node.y)
.y((node) => node.x);
svg
.selectAll(".node")
.data(root.descendants())
.join((enter) =>
enter
.append("circle")
.attr("fill", (d) => (d.children ? "#555" : "#999"))
)
.attr("r", 2.5)
.attr("class", "node")
.attr("cx", (node) => node.y)
.attr("cy", (node) => node.x)
.attr("r", 2.5)
.transition()
.duration(500)
.delay((node) => node.depth * 300)
.attr("opacity", 1);
// links
const enteringAndUpdatingLinks = svg
.selectAll(".path")
.data(root.links())
.join("path")
.attr("class", "link")
.attr("d", linkGenerator)
.attr("stroke-dasharray", function() {
const length = this.getTotalLength();
return `${length} ${length}`;
})
.attr("stroke", "black")
.attr("fill", "none")
.attr("stroke-opacity", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.4);
if (data !== previouslyRenderedData) {
enteringAndUpdatingLinks
.attr("stroke-dashoffset", function() {
return this.getTotalLength();
})
.transition()
.duration(500)
.delay((link) => link.source.depth * 500)
.attr("stroke-dashoffset", 5);
}
//labels
svg
.selectAll(".text")
.data(root.descendants())
.join("text")
.attr("x", (d) => d.y)
.attr("y", (d) => d.x)
.attr("dy", "0.31em")
.attr("dx", (d) => (d.children ? -6 : 6))
.text((d) => (d.children ? d.data.name : d.data.funding))
.attr("text-anchor", (d) => (d.children ? "end" : "start"))
.attr("font-size", (d) => (d.children ? 15 : 14));
Advertisement
Answer
After tinkering around with it I managed to solve it by altering root.dx and root.dy.
root.dx = 18; root.dy = width / (root.height * 0.6);
