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 });