fix untitled #36

Jacky Zhao

2021-12-24 2ba01c831178facd35c62adcb22f3cc39ead6975

 layouts/partials/graph.html

@@ -1,17 +1,19 @@
<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>
  const index = {{$.Site.Data.linkIndex.index}}
  const links = {{$.Site.Data.linkIndex.links}}
  const content = {{$.Site.Data.contentIndex}}
  const curPage = {{ strings.TrimRight "/" .Page.RelPermalink }}
  const pathColors = {{$.Site.Data.graphConfig.paths}}

@@ -125,7 +127,7 @@
    .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")
@@ -136,7 +138,7 @@
      const neighbours = parseIdsFromLinks([...(index.links[d.id] || []), ...(index.backlinks[d.id] || [])])
      const neighbourNodes = d3.selectAll(".node").filter(d => neighbours.includes(d.id))
      const currentId = d.id
      const links = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
      const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)

      // highlight neighbour nodes
      neighbourNodes
@@ -145,7 +147,7 @@
        .attr("fill", color)

      // highlight links
      links
      linkNodes
        .transition()
        .duration(200)
        .attr("stroke", "var(--g-link-active)")
@@ -164,9 +166,9 @@
        .attr("fill", color)

      const currentId = d.id
      const links = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
      const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)

      links
      linkNodes
        .transition()
        .duration(200)
        .attr("stroke", "var(--g-link)")
@@ -183,7 +185,7 @@
  const labels = graphNode.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text((d) => d.id)
    .text((d) => content[d.id.replace("%20", "-")]?.title || "Untitled")
    .style("opacity", 0)
    .style("pointer-events", "none")
    .call(drag(simulation));
@@ -215,4 +217,4 @@
      .attr("x", d => d.x)
      .attr("y", d => d.y);
  });
</script>
</script>