import { select, csv, stratify, tree, hierarchy,
linkHorizontal, zoom, event } from 'd3'; // Setup SVG and
dimensions const svg = select('svg'); const width =
document.body.clientWidth; const height =
document.body.clientHeight; const margin = { top: 0, right:
50, bottom: 0, left: 75}; const innerWidth = width -
margin.left - margin.right; const innerHeight = height -
margin.top - margin.bottom; // Define the tree layout const
treeLayout = tree().size([innerHeight, innerWidth]); //
Setup zoomable group const zoomG = svg .attr('width', width)
.attr('height', height) .append('g'); const g =
zoomG.append('g') .attr('transform',
`translate(${margin.left},${margin.top})`); // Enable zoom
svg.call(zoom().on('zoom', (e) => { zoomG.attr('transform',
e.transform); })); // Load CSV data
csv('data.csv').then(data => { // Transform flat data to
hierarchical data const root = stratify() .id(d => d.id)
.parentId(d => d.parent_id)(data) .sort((a, b) => (a.height
- b.height) || a.id.localeCompare(b.id)); const
rootHierarchy = hierarchy(root); const links =
treeLayout(rootHierarchy).links(); const linkPathGenerator =
linkHorizontal() .x(d => d.y) .y(d => d.x); // Draw links
g.selectAll('path').data(links) .enter().append('path')
.attr('d', linkPathGenerator); // Draw nodes
g.selectAll('text').data(rootHierarchy.descendants())
.enter().append('text') .attr('x', d => d.y) .attr('y', d =>
d.x) .attr('dy', '0.32em') .attr('text-anchor', d =>
d.children ? 'middle' : 'start') .attr('font-size', d =>
3.25 - d.depth + 'em') .text(d => d.data.data.name); //
Changed to display the name });