31:T2387,{ // config const width = 1200; const height = 600; const cellCountX = 12; const cellCountY = 12; const cellSize = 50; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto") .style("min-height", "200px"); // data const tree = data => { const root = d3.hierarchy(data); root.dx = 1; root.dy = 4; return d3.tree().nodeSize([root.dx + 1, root.dy])(root); }; // transforms const isoPointTransform = (x, y, z=0) => { return isometryjs.standardIsometricTransform(x * cellSize, y * cellSize, z * cellSize); }; const flipY = (x, y, z) => { return [x, cellCountY - y - 2, z]; }; const centerX = (x, y, z) => { return [x + (cellCountX / 2), y, z]; }; // functions const createStage = (svg, cellSize, cellCountX, cellCountY) => { const stage = svg.append('g'); stage.classed('stage'); svg .attr('width', width) .attr('height', height) .attr('viewBox', [ -cellSize * (cellCountX + 1), 0, cellSize * cellCountY * 2, cellSize * cellCountX ].join(' ')); return stage; }; const drawPolygon = (points, selection, pointTransform) => { pointTransform = pointTransform || ((...c) => c); return selection.append('polygon') .attr( 'points', (d) => { return points.map(p => { const [x, y] = pointTransform(...p); return [x, y].join(); }).join(' ') } ) .attr('fill', 'none'); }; // Takes a list of points and draws a "3D" polygon for each point pair const drawExtrusion = (points, selection, pointTransform, z=1) => { const extrusion = selection.append('g') .attr('class', 'extrusion') .each((d) => { let x1, x2, y1, y2; for (let i = 1; i < points.length; i++) { x1 = points[i - 1][0]; y1 = points[i - 1][1]; x2 = points[i][0]; y2 = points[i][1]; drawPolygon([ [x1, y1, z], [x1, y1, 0], [x2, y2, 0], [x2, y2, z], ], selection.selectAll('.extrusion'), pointTransform); } }); }; const drawSquare = (origin, selection, pointTransform) => { const [x, y, z] = origin; return drawPolygon([ [x, y, z], [x + 1, y, z], [x + 1, y + 1, z], [x, y + 1, z] ], selection, pointTransform) .attr('stroke', '#999') .attr('stroke-width', 0.25); }; const drawGrid = (selection, cellCountX, cellCountY, pointTransform) => { const grid = selection.append('g').attr('class', 'grid'); for (let x = 0; x < cellCountX; x++) { for (let y = 0; y < cellCountY; y++) { drawSquare([x, y], grid, pointTransform); } } return grid; }; const drawNodes = (root, selection, pointTransform) => { const nodes = selection.append('g'); nodes.attr('class', 'nodes'); const node = nodes.selectAll("g") .data(root.descendants().reverse()) .enter() .append('g') .attr('class', 'node') .attr('transform', d => { const coords = [ d.x, d.y ]; const isoCoords = pointTransform(...centerX(...flipY(...coords))); return `translate(${isoCoords[0]},${isoCoords[1]})`; }) .each(function (d) { const shape = d.data.shape || 'square'; let z; switch (shape) { case 'pyramid': z = 2; drawSquare([0, 0, 0], d3.select(this), pointTransform); drawPolygon([ [1/2, 1/2, z], [1, 0, 0], [1, 1, 0], ], d3.select(this), pointTransform); drawPolygon([ [1/2, 1/2, z], [1, 1, 0], [0, 1, 0], ], d3.select(this), pointTransform); break; case 'cross': z = 1/4; drawExtrusion([ [2/3, 0, z], [2/3, 1/3, z], ], d3.select(this), pointTransform, z); drawExtrusion([ [1/3, 2/3, z], [0, 2/3, z], ], d3.select(this), pointTransform, z); drawExtrusion([ [2/3, 1, z], [1/3, 1, z], ], d3.select(this), pointTransform, z); drawExtrusion([ [2/3, 2/3, z], [2/3, 1, z], ], d3.select(this), pointTransform, z); drawExtrusion([ [1, 2/3, z], [2/3, 2/3, z], ], d3.select(this), pointTransform, z); drawExtrusion([ [1, 1/3, z], [1, 2/3, z], ], d3.select(this), pointTransform, z); drawPolygon([ [1/3, 0, z], [2/3, 0, z], [2/3, 1/3, z], [1, 1/3, z], [1, 2/3, z], [2/3, 2/3, z], [2/3, 1, z], [1/3, 1, z], [1/3, 2/3, z], [0, 2/3, z], [0, 1/3, z], [1/3, 1/3, z], ], d3.select(this), pointTransform); break; case 'hexagon': z = 1/3; drawPolygon([ [1/4, 0, z], [3/4, 0, z], [1, 1/2, z], [3/4, 1, z], [1/4, 1, z], [0, 1/2, z], ], d3.select(this), pointTransform); drawExtrusion([ [3/4, 0, z], [1, 1/2, z], [3/4, 1, z], [1/4, 1, z], ], d3.select(this), pointTransform, z); break; case 'octagon': z = 1/2; drawPolygon([ [1/3, 0, z], [2/3, 0, z], [1, 1/3, z], [1, 2/3, z], [2/3, 1, z], [1/3, 1, z], [0, 2/3, z], [0, 1/3, z], ], d3.select(this), pointTransform); drawExtrusion([ [1, 1/3], [1, 2/3], [2/3, 1], [1/3, 1], ], d3.select(this), pointTransform, z); break; default: drawSquare([0, 0, 1], d3.select(this), pointTransform); drawExtrusion([ [1, 0], [1, 1], [0, 1] ], d3.select(this), pointTransform); break; } }); return nodes; }; const drawLinks = (root, selection, pointTransform) => { pointTransform = pointTransform || (c => c); const lines = selection .append('g') .attr('class', 'links') .selectAll('polyline').data(root.links()); lines.exit().remove(); lines.enter().append('polyline') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 1.25) .attr('stroke-linecap', 'round') .attr('marker-start', 'url(#marker-square)') .attr('marker-end', 'url(#marker-arrow)') .merge(lines) .attr('points', d => { console.log(d); const halfCell = cellSize / 2; const from = [ d.source.x + 1/2, d.source.y ]; const to = [ d.target.x + 1/2, d.target.y - 1 ]; const dX = Math.abs(from[0] - to[0]); const dY = Math.abs(from[1] - to[1]); const sign = (from[1] < to[1]) ? -1 : 1 const [x1, y1] = pointTransform(...centerX(...flipY(...from))); const [x2, y2] = pointTransform(...centerX(...flipY(...[to[0], to[1] + sign * (dY / 2)]))); const [x3, y3] = pointTransform(...centerX(...flipY(...to))); return [ [x1, y1].join(','), [x2, y2].join(','), [x3, y3].join(',') ].join(' '); }); return selection.selectAll('polyline'); }; const drawLabels = (root, selection, pointTransform) => { const nodes = selection.append('g'); nodes.attr('class', 'labels'); const node = nodes.selectAll("g") .data(root.descendants().reverse()) .enter() .append('g') .attr('class', 'label') .attr('transform', d => { const coords = [ d.x, d.y ]; const isoCoords = pointTransform(...centerX(...flipY(...coords))); return `translate(${isoCoords[0]},${isoCoords[1]})`; }); node.append("text") .attr('class', 'shadow') .attr("text-anchor", 'middle') .attr('dx', d => cellSize * -0.5) .attr('dy', d => cellSize * 1.25) .attr('style', d => { return 'transform: rotate(-30deg) skewX(30deg);'; }) .text(d => d.data.name); node.append("text") .attr("text-anchor", 'middle') .attr('dx', d => cellSize * -0.5) .attr('dy', d => cellSize * 1.25) .attr('style', d => { return 'transform: rotate(-30deg) skewX(30deg);'; }) .text(d => d.data.name); return nodes; }; const stage = createStage(svg, cellSize, cellCountX, cellCountY); const grid = drawGrid(stage, cellCountX, cellCountY, isoPointTransform); const root = tree(data); const links = drawLinks(root, stage, isoPointTransform); const labels = drawLabels(root, stage, isoPointTransform); const nodes = drawNodes(root, stage, isoPointTransform); return svg.node(); }32:[] 2f:{"title":"suggestions:@randallmorey/isometric-tree","cells":[{"id":88,"value":"html`\n

Fixes: Failed to fetch dynamically imported module`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`# Isometric Tree\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"isometryjs = require('https://bundle.run/@randallmorey/isometryjs@1.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"data = ({\n  name: 'Globular Cluster',\n  children: [\n    {\n      name: 'Thirsk',\n      children: [\n        {\n          name: 'DB',\n          shape: 'octagon'\n        },\n        {\n          name: 'OS X',\n          shape: 'pyramid'\n        }\n      ]\n    },\n    {\n      name: 'London',\n      shape: 'octagon'\n    },\n    {\n      name: 'Hereford',\n      children: [\n        {\n          name: 'Linux',\n          shape: 'cross'\n        },\n        {\n          name: 'Alpine',\n          shape: 'hexagon'\n        }\n      ]\n    },\n    {\n      name: 'Stratford-upon-Avon'\n    }\n  ]\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}