Render D3 Visualization
render_d3Render D3.js charts, graphs, and diagrams as editable Figma vector nodes, preserving text as editable text.
Instructions
Render a D3.js visualization as editable Figma vector nodes. PREFERRED for data visualizations, charts, graphs, diagrams.
The script runs in the plugin iframe with full D3 v7 available. Write JS that uses d3 to build SVG in the scratch div. The SVG is auto-extracted and converted to editable Figma nodes.
Available globals: d3, scratch (offscreen div to render into). The script should either return an SVG string or render into scratch (auto-extracted).
IMPORTANT: All text becomes editable Figma text nodes. This is the best renderer for data-driven graphics.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | No | ||
| y | No | ||
| width | No | Resize result width | |
| height | No | Resize result height | |
| script | Yes | JavaScript code using d3. Access d3 and scratch div. Return SVG string or render into scratch. | |
| parentId | Yes | Parent node (typically slide ID) |