| | |
| | | async function drawGraph( |
| | | baseUrl, |
| | | pathColors, |
| | | async function drawGraph(baseUrl, isHome, pathColors, graphConfig) { |
| | | |
| | | let { |
| | | depth, |
| | | enableDrag, |
| | | enableLegend, |
| | | enableZoom, |
| | | isHome, |
| | | opacityScale, |
| | | scale, |
| | | repelForce, |
| | | fontSize |
| | | ) { |
| | | fontSize} = graphConfig; |
| | | |
| | | const container = document.getElementById("graph-container") |
| | | const { index, links, content } = await fetchData |
| | | |
| | |
| | | .append("svg") |
| | | .attr("width", width) |
| | | .attr("height", height) |
| | | .attr('viewBox', [-width / 2 * 1 / scale, -height / 2 * 1 / scale, width * 1 / scale, height * 1 / scale]) |
| | | .attr('viewBox', [-width / 2 / scale, -height / 2 / scale, width / scale, height / scale]) |
| | | |
| | | if (enableLegend) { |
| | | const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors] |
| | |
| | | const nodeRadius = (d) => { |
| | | const numOut = index.links[d.id]?.length || 0 |
| | | const numIn = index.backlinks[d.id]?.length || 0 |
| | | return 3 + (numOut + numIn) / 4 |
| | | return 2 + Math.sqrt(numOut + numIn) |
| | | } |
| | | |
| | | // draw individual nodes |
| | |
| | | // highlight links |
| | | linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)") |
| | | |
| | | const bigFont = fontSize+0.5 |
| | | const bigFont = fontSize*1.5 |
| | | |
| | | // show text for self |
| | | d3.select(this.parentNode) |