Context menu for SVG elements

100%

Context menu for SVG elements

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on May 16, 2017

A context menu appears at the mouse cursor when the user right-clicks a central square in an SVG canvas. The menu, built with D3 v3, lists three text items and is styled with hover effects. The code defines a reusable `contextMenu` function that automatically measures text to size menu entries, and attaches the menu using D3's `on('contextmenu')` event with `d3.event.preventDefault()`. Clicking anywhere else on the body removes the menu.

AI-generated description

forked from <a href='http://bl.ocks.org/jakosz/'>jakosz</a>'s block: <a href='http://bl.ocks.org/jakosz/ce1e63d5149f64ac7ee9'>Context menu for SVG elements</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Mind Map (adding the context menu with d3)

This example shows a hierarchical mind map exploring Leonardo da Vinci and related figures, with a custom context menu that appears on right-click. The tree layout is built using D3 v3’s `d3.layout.tree`, rendering nodes as SVG rectangles and links as paths, with data loaded from a JSON file. The context menu is implemented with D3 selections, dynamically sized based on text measurement, and uses mouse events for hover styling and dismissal. The visualization also supports zoom and drag via `d3.behavior.zoom`, and includes tooltips and animated updates.

Ssonakshi

66% match

Loading thumbnail…

Menu_NH

A single circle follows the mouse cursor across a full-screen SVG canvas. The example uses D3 v7’s `select` and `append` methods to create the SVG and circle element, then listens for `mousemove` events on the SVG to update the circle’s `cx` and `cy` attributes with the cursor’s coordinates. The page has no margins and hides overflow, so the interaction fills the entire viewport.

NNavak94

66% match

Loading thumbnail…

Mouse click

Three circles, bound to the array `[50,40,60]`, render in steel blue on an SVG canvas. Hovering turns a circle red, and clicking turns it black, while a zoom behavior attached via `d3.behavior.zoom` allows panning and scaling the entire group with the mouse wheel or drag. The example demonstrates basic event handling and zoomable SVG rendering using D3 v3, with the data hardcoded in the script.

IIgathi

66% match

Loading thumbnail…

Menus with react

The example shows an interactive menu system rendered with React and SVG, drawing a yellow circle with a black border as the central visual element. The code uses React components, such as `BackgroundCircle`, to define SVG elements, and relies on ReactDOM to mount the application into the HTML page. It imports D3.js version 6.7.0, though the visible code primarily creates static SVG shapes rather than dynamic D3-driven visualizations. The interface is built from a minimal React app structure, with D3 available as a dependency for potential data manipulation. The rendering approach is SVG within a React component hierarchy.

Vvigneswaran009

65% match

Loading thumbnail…

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

深深度碎片

65% match

Loading thumbnail…

tooltips

This example demonstrates a simple tooltip that appears when the user hovers over a circle in an SVG. The tooltip is a div element created with d3.select that becomes visible on mouseover, follows the cursor using page coordinates on mousemove, and hides on mouseout. The code uses D3 v7 to append an SVG circle with specified stroke, fill, radius, and position attributes, and binds the mouse events directly to that circle. The tooltip’s text is static, and no external data source is used.

Wwjj1928

64% match

Loading thumbnail…

OnMouse Events and ToolTips

This example demonstrates interactive SVG circles that respond to mouse events with tooltips. The visualization renders three orange circles of varying sizes on a whitesmoke background, each containing a distinct message. Using D3 v7 with the d3-selection-multi extension for chained attribute calls, the code binds data to circle elements and applies radius, position, and fill properties. The SVG canvas is 1000 by 800 pixels, with tooltip functionality triggered through the message property in the dataset.

Llupica.matthew@gmail.com

64% match

Loading thumbnail…

SVG Fundamentals

Three circles of different colors and sizes on a blank SVG canvas demonstrate the basics of SVG markup. The example shows how to draw and position shapes directly in HTML without any JavaScript interaction. The page uses D3 version 6 and includes inline SVG elements: two red circles and one black circle, each with explicit `cx`, `cy`, and `r` attributes. The accompanying `index.js` imports the `select` function from D3 and writes text to the page body.

TTal van Dijk

64% match