Hide Connector Nodes

100%

Hide Connector Nodes

✓ Published0🌍 Public

Last edited Nov 12, 2021

Created on Nov 12, 2021

This example hides all connector nodes in a Figma file to declutter a diagram or flow view. The script filters the current page’s children for layers with type `"CONNECTOR"` and toggles their `visible` property to `false`. It uses the Figma JavaScript API (`figma.currentPage.children`) to access the document hierarchy. The visualization focuses on the canvas state before and after execution, demonstrating a simple, programmatic way to clear line-based metadata from the scene without altering underlying content.

AI-generated description

Similar vizzes

Loading thumbnail…

Disconn Actual Old

This example shows a node-link diagram where event nodes connect to attribute nodes such as eventName, index, and traceId, with a toggleable view that disconnects all attributes from their parent entities. The visualization uses WebCola’s `d3adaptor` for constrained layout, rendering nodes and links as SVG elements within a zoomable `g` group. Node colors are loaded from a JSON theme file, with distinct palettes for entities, attributes, relations, and shadows. Pressing the spacebar triggers the disconnection or reconnection of attribute links, updating the layout live via `restart()`.

Bbrett@cloudaccelerator.co

53% match

Loading thumbnail…

Gist e23004e556ab1d1e670720475c9ef0ce

The visualization shows a network of connected nodes, each labeled with a letter, where edges link pairs of nodes. It uses d3.forceSimulation to position nodes, with a drag interaction and a highlighted path between two specific nodes. The rendering relies on SVG elements (circles, lines, and text) updated via d3’s data join. The regex pattern `(?<=\d)\s(?=[A-z])` appears in the code, suggesting it processes input text to extract or filter connections, though the exact source data is not visible.

HHugoberry

49% match

Loading thumbnail…

Force-Directed Graph: Collapsible, Hierarchical

This example displays a hierarchical dataset (flare.json) as a collapsible, force-directed graph. Nodes are rendered as SVG circles, and links as lines, with a color scheme distinguishing leaf nodes, parent packages, and clusters. Clicking a node toggles the visibility of its children, causing the layout to recompute. The visualization uses the `d3.layout.force` API, manually applying constraints in the force `on("tick")` handler to enforce vertical hierarchy and keep nodes within the visible area, while also supporting node dragging.

GGerHobbelt

49% match

Loading thumbnail…

Untitled

This example visualizes a network graph by rendering a JSON-graph file (wEFP.json) into an interactive display using the Sigma.js library, specifically the sigma.parsers.json API. The graph is loaded into a container with a fixed 400x400px size, and its nodes are colored with a default red (#ec5148). The rendering leverages Sigma.js’s built-in graph layout and canvas-based drawing, with the sigma.min.js core script handling the visualization. The setup is minimal, relying on Sigma’s parser to directly convert the JSON structure into a visual network.

00-1CxH

49% match

Loading thumbnail…

Disconn Actual

This interactive graph visualization demonstrates a Grakn knowledge graph, showing entities, attributes, and relations with distinct color schemes. Users can toggle between connected and disconnected attribute views, reveal shadow relationships, and group or dissolve nodes via buttons or the spacebar. The visualization uses D3 v4 with the WebCola layout library for constraint-based graph positioning, rendering in SVG within a React framework. Node and edge styles are dynamically updated based on user interactions, with color themes loaded from a JSON palette file.

Bbrett@cloudaccelerator.co

49% match

Loading thumbnail…

Untitled

This example shows an interactive force-directed graph of hierarchical data from a JSON file, where nodes represent categories and files, and links show parent-child relationships. Users can collapse or expand nodes by clicking, which restarts the layout simulation. The visualization uses the `d3.layout.force` API to compute node positions and link distances, with node size mapped from the data’s `size` attribute. Rendering is done via SVG, with circle styling and text labels per node, and the color function distinguishes collapsed, expanded, and leaf nodes.

Ssgzzhinde

49% match

Loading thumbnail…

Untitled

A force-directed network graph displays the hierarchical structure of the Flare dataset, with nodes representing files and folders and links showing parent-child relationships. Node size reflects the numeric size attribute, while color distinguishes leaf nodes (orange), collapsed packages (blue), and expanded packages (light blue). Users can click nodes to toggle their children, dynamically collapsing or expanding branches. Built with React and D3 v3, the visualization uses `d3.layout.force` for physics simulation, `flatten` to convert the tree, and SVG elements for rendering. The custom React component `VizContainer` follows the margin convention and optionally displays background rectangles for layout debugging.

JJediquu

49% match

Loading thumbnail…

Fork of GraphLayout with Interactive Filtering

This interactive graph layout demonstrates filtering of connected nodes using d3.forceSimulation, forceLink, and forceManyBody to position nodes with color-coded clusters. A color legend and check button allow users to select specific node groups by clicking legend circles or toggling layer display, which triggers node resizing and edge visibility updates. The visualization uses precomputed x, y, and k coordinates from CSV data, rendered as SVG circles and lines with animated transitions lasting one second.

Llimenzi

49% match