| | |
|---|
| | | <script src="https://cdn.jsdelivr.net/npm/d3@6"></script> |
|---|
| | | <h3>Interactive Graph</h3> |
|---|
| | | <div id="graph-container"></div> |
|---|
| | | <style> |
|---|
| | | :root { |
|---|
| | |
|---|
| | | .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)); |
|---|
