| | |
|---|
| | | .transition() |
|---|
| | | .duration(200) |
|---|
| | | .style("opacity", 0.2) |
|---|
| | | |
|---|
| | | d3.selectAll<HTMLElement, NodeData>(".node") |
|---|
| | | .filter((d) => !connectedNodes.includes(d.id)) |
|---|
| | | .nodes() |
|---|
| | | .map((it) => d3.select(it.parentNode as HTMLElement).select("text")) |
|---|
| | | .forEach((it) => { |
|---|
| | | let opacity = parseFloat(it.style("opacity")) |
|---|
| | | it.transition() |
|---|
| | | .duration(200) |
|---|
| | | .attr("opacityOld", opacity) |
|---|
| | | .style("opacity", Math.min(opacity, 0.2)) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | // highlight links |
|---|
| | |
|---|
| | | if (focusOnHover) { |
|---|
| | | d3.selectAll<HTMLElement, NodeData>(".link").transition().duration(200).style("opacity", 1) |
|---|
| | | d3.selectAll<HTMLElement, NodeData>(".node").transition().duration(200).style("opacity", 1) |
|---|
| | | |
|---|
| | | d3.selectAll<HTMLElement, NodeData>(".node") |
|---|
| | | .filter((d) => !connectedNodes.includes(d.id)) |
|---|
| | | .nodes() |
|---|
| | | .map((it) => d3.select(it.parentNode as HTMLElement).select("text")) |
|---|
| | | .forEach((it) => it.transition().duration(200).style("opacity", it.attr("opacityOld"))) |
|---|
| | | } |
|---|
| | | const currentId = d.id |
|---|
| | | const linkNodes = d3 |
|---|
| | |
|---|
| | | // @ts-ignore |
|---|
| | | .call(drag(simulation)) |
|---|
| | | |
|---|
| | | // make tags hollow circles |
|---|
| | | node |
|---|
| | | .filter((d) => d.id.startsWith("tags/")) |
|---|
| | | .attr("stroke", color) |
|---|
| | | .attr("stroke-width", 2) |
|---|
| | | .attr("fill", "var(--light)") |
|---|
| | | |
|---|
| | | // draw labels |
|---|
| | | const labels = graphNode |
|---|
| | | .append("text") |
|---|
