viewof treeview = { const svg = d3.create("svg") .attr("viewBox", [0,0, 4*840, 4*640]) // .attr("filter", "url(#filter)") // only needed when rendering to png/svg .classed("treeview",true) let cache = [{x:0, y:0}]; const defs = svg.append("defs") const style = (` ${filthy('sepia(5%) invert(96%) brightness(225%) sepia(25%)')}`) let init = performance.now() let res = 4 let nodes = root.descendants() let links = root.links(); const steps = root.height //*root.descendants().length; const interp = d3.interpolateTurbo; const colorMap = {}; for (const [i, node] of nodes.entries()) { colorMap[node.id] = interp(0.675 - (((node.data.size || node.value )**0.75 ) / (steps) )) } const g = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 11) const disp = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 84) .append("text") .attr("x",-3448).attr("y",1840) .attr("style",mobile ? '' : "display:none;") .attr("paint-order","stroke fill") .attr("stroke-width",1) .attr("stroke", "white") .classed('disp',true) let prepLinks = performance.now(); let lod = ""; let grads = []; const link = g.append("g") .attr("id","links") .attr("fill", "none") //.attr("stroke", "#555") .attr("stroke-width", 0.75) .selectAll("path") .data(links) .join("path") .attr("d", d3.linkRadial() .angle(d => d.x) .radius(d => d.y) .digits(0)) .attr("stroke-linecap", "round") .attr("vector-effect" , "non-scaling-stroke") .classed('stem', function({source,target}){ return target.children?.length || source.parent == undefined ? true : (source.children.at(0) == target || source.children.at(-1) == target) ? nodes.length < 2048+512 ? true : Math.random() > 0.5 : false }) .classed('coarse', function({source,target}){ return target.value > 3 || source.parent == undefined ? true : false }) .attr('stroke', function ({source, target}) { // get src/tgt from computed path let d = this.getAttribute('d') lod += d //this.classList.contains('stem') ? d : ''; let path = d.split(/[MC,]/).slice(1) let src = {x:path[0],y:path[1]} let tgt = {x:path[6],y:path[7]} cache.push(tgt) // encodeURIComponents when using strings // ids NEED be asci compatible // make sure id has no `--` in it const gradId = (`${source.index}--${target.index}`) this.setAttribute('id','link_'+gradId) /*const grad = defs.append('linearGradient') .attr('id', gradId) .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', src.x) .attr('x2', tgt.x) .attr('y1', src.y) .attr('y2', tgt.y); grad.append('stop') .attr('offset', '0%') .attr('stop-color', colorMap[source.id]); grad.append('stop') .attr('offset', '100%') .attr('stop-color', colorMap[target.id]);*/ grads.push( ` `.replaceAll('\n','')) return `url(#${gradId})`; }) g.append("path") .attr("d", lod) .attr("stroke", Object.values(colorMap).at(~~(nodes.length/3)))//d3.interpolateHcl(mode(Object.values(colorMap)),'darkgreen')(0.15)) .attr('fill',"none") // .attr('opacity',0) .classed('lod',true).lower() defs.html(style + '\n\n' + grads.join('')) let prepNodes = performance.now() const node = g.append("g") .attr("id","nodes") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(nodes) .join("g") .attr("id", function(d){ // include direct DOM node reference in data d.node = this; return d.index }) .attr("transform", d => `rotate(${parseFloat((d.x * 180 / Math.PI - 90).toPrecision(res))}) translate(${parseFloat((d.y).toPrecision(res))},0)`); node.append("circle") .attr("fill", "white") .attr('stroke', n => colorMap[n.id]) .attr('stroke-width', 1.5) .attr("r", d=> Math.round(Math.sqrt(d.value))) /*.classed('stem', function(){ let dat = d3.select(this).data()[0] return dat.children?.length ? true : dat.parent.children[0] == dat || dat.parent.children.at(-1) == dat })*/ .classed('coarse', function(sel){ return d3.select(this).data()[0].value > 3 ? true : false }) svg.select('circle').attr('id','root') let maxLength = 24; let prepText = performance.now(); function addText(node) { node.append("text") .attr("transform", d => `rotate(${d.x >= Math.PI ? 180 : 0})`) .attr("dy", "0.32em") .attr("x", d => d.x < Math.PI === !d.children ? 8 : -8) .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end") .attr("fill", "#777" ) .text(d => d.id.split('/').filter(Boolean).at(-1)?.slice(0,maxLength) ) .classed('stem', function(){ let dat = d3.select(this).data()[0] return dat.children?.length ? true : false }) .attr("paint-order","stroke fill") .attr("stroke-width",1) .attr("stroke", "white") } addText(node) let area = g.append("circle") .attr('id','area') .attr('r',span * 1.5) .attr('fill','white') .attr('opacity',0) .attr('will-change','opacity') .attr('style','will-change:opacity;') .attr('mask', "url(#activePath)") let clip = svg.append("mask") .attr('id',"activePath") clip.append("circle") .attr('r',span *1.5) .attr('fill', 'white') // ----- highlighter let prepCoords = performance.now(); let coords; function updateCoords() { coords = cache //consolidateCoords(node.selectAll('circle').nodes(),{absolute:true}) } updateCoords() let prepFinished = performance.now(); let bounceOver = null; g.on("pointermove", function(event) { clearTimeout(bounceOver); const m = d3.pointer(event); // d3.select(event.target).data()[0].source || d3.select(event.target).data()[0]; let leaf = nodes[d3.scan(coords.map(d => dist2([d.x, d.y], m)))] if(leaf) { let context = leaf.node.ownerSVGElement disp.text(leaf.data.name.replace(/.$/,'').replaceAll('/',' > ')) const data = leaf.ancestors() const path = data.map(d=>d.data) clip.selectAll('path').remove() // vanilla selectors for better performance context.querySelectorAll('.show').forEach(node=>(node.classList.remove("show"),node.classList.remove("leaf"))) context.querySelectorAll(':is(#nodes, #id):not(.blur)').forEach(group => group.classList.add('blur')) context.querySelector('#area').classList.add("veil") for (let i = 0; i < data.length; ++i) { data[i].node.classList.add("show") } leaf.node.classList.add("leaf") //d3.selectAll(data.map(d=>d.node)).call(addText) d3.pairs(data).forEach(([target,source])=>{ let el = document.getElementById(`link_${source.index}--${target.index}`); el.classList.add("show") let cl = el.cloneNode() cl.setAttribute('stroke','black') clip.node().appendChild(cl) }) bounceOver = setTimeout( function(){ context.value = path; context.dispatchEvent(new Event("input")) }, 11) } } ); // -------- debounce on leave // https://stackoverflow.com/questions/69116998 // a-concise-simpler-way-to-debounce-the-onclick-event let bounceOut = null; g.on('transitionend touchend pointerleave', function(event) { clearTimeout(bounceOut); bounceOut = setTimeout(()=> { event.target.style.setProperty('pointer-events', 'none'); node . classed('show',null); link . classed('show',null); area . classed("veil", null); node . classed("leaf", null); g . selectAll('#nodes, #links') . classed('blur',null) event . target.style . setProperty('pointer-events', 'auto')}, 550)}) // ------- styling let initRender = performance.now() let view = focus(svg . attr('transform-origin','center'), /*{ end: ()=>updateCoords()}*/) . attr('viewBox',[-2048,-2048,4096,4096]), gap = 0; view . insert('rect','g').attr('id','bg') . attr('x','-1000%') . attr('y','-1000%') . attr('width','2000%') . attr('height','2000%') . attr('fill','white'); view . attr('style',` padding:${gap}px; width: ${width-(gap*2)}; max-width: ${width-(gap*2)}; border: 1px solid #ddd; border-radius: 8px; overflow:hidden; transform-origin: center; user-select: none; max-height: 620px; filter: sepia(5%) invert(96%) brightness(225%) sepia(25%);`) let out = view.node() let pubRender = performance.now() console.log("Init: ", parseInt(prepLinks - init)) console.log("Build links: ", parseInt(prepNodes - prepLinks)) console.log("Build nodes: ", parseInt(prepText - prepNodes)) console.log("Build label: ", parseInt(prepCoords - prepText)) console.log("Apply coords: ", parseInt(prepFinished - prepCoords)) console.log("Prep render: ", parseInt(pubRender - initRender)) return out }