| | |
|---|
| | | <script src="https://cdn.jsdelivr.net/npm/d3@6"></script> |
|---|
| | | <h3>Interactive Graph</h3> |
|---|
| | | <div id="graph-container"></div> |
|---|
| | | <style> |
|---|
| | | :root { |
|---|
| | | --g-node: {{.Site.Data.graphConfig.base.node}}; |
|---|
| | | --g-node-active: {{.Site.Data.graphConfig.base.activeNode}}; |
|---|
| | | --g-node-inactive: {{.Site.Data.graphConfig.base.inactiveNode}}; |
|---|
| | | --g-link: {{.Site.Data.graphConfig.base.link}}; |
|---|
| | | --g-link-active: {{.Site.Data.graphConfig.base.activeLink}}; |
|---|
| | | --g-node: var(--secondary); |
|---|
| | | --g-node-active: var(--primary); |
|---|
| | | --g-node-inactive: var(--visited); |
|---|
| | | --g-link: var(--outlinegray); |
|---|
| | | --g-link-active: #5a7282; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <script> |
|---|
| | |
|---|
| | | .attr("fill", color) |
|---|
| | | .style("cursor", "pointer") |
|---|
| | | .on("click", (_, d) => { |
|---|
| | | window.location.href = d.id; |
|---|
| | | window.location.href = {{.Site.BaseURL}} + d.id.replace(" ", "-").replace("%20", "-"); |
|---|
| | | }) |
|---|
| | | .on("mouseover", function (_, d) { |
|---|
| | | d3.selectAll(".node") |
|---|
| | |
|---|
| | | const labels = graphNode.append("text") |
|---|
| | | .attr("dx", 12) |
|---|
| | | .attr("dy", ".35em") |
|---|
| | | .text((d) => d.id) |
|---|
| | | .text((d) => encodeURI(d.id)) |
|---|
| | | .style("opacity", 0) |
|---|
| | | .style("pointer-events", "none") |
|---|
| | | .call(drag(simulation)); |
|---|
