Skip to content
create an editable svg path. a library to enable in-app path editing
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
.vscode
demo
img feat: enable line customization Dec 1, 2019
src
test
.gitignore
.htmlnanorc
.nvmrc
commitlint.config.js
package.json
project.code-workspace
readme.md
renovate.json
testem.yml
tsconfig.json chore: fix demo Dec 1, 2019
tsconfig.prod.json
webpack.config.js feat: init Dec 1, 2019
yarn.lock

readme.md

@dino-dna/d3-svg-path-editor

create an editable svg path. a library to enable in-app path editing

JavaScript Style Guide semantic-release TypeScript package

see the live, interactive demo

install

npm install --save @dino-dna/d3-svg-path-editor d3

on the topic of d3 and bundle performance, some minimal subset of d3 packages must be installed and added onto the d3 instance. we use d3-line, d3-selection, and d3 events. d3 experts are welcome to add documentation on how to optimize web builds here for d3 bundles!

usage

create a path from a set of points and d3 svg instance

import { fromPoints } from '@dino-dna/d3-svg-path-editor'
const points: [number, number][] = [[0, 0], [10, 10]]
const svg$ = d3.select((document.getElementById('my_svg')) as SVGSVGElement)
const {
  path$, // d3 path selection
  nodes, // abstract point datas. mutable
  undo, // undo last edits
  disableEditing, // call to disable editing
  enableEditing, // call to enable editing
  render, // call to trigger a manual/forced rerender. useful if state changes externally
  setNodeVisibility, // call to show/hide nodes
  snapper // new node creator (snapper) instance
} = fromPoints({
  // # required
  points,
  svg$,
  // # optional
  // onStateChange: nodes => { ... },
  // testCanEditNode: node => boolean // control node edit-ability
  // transformLine: d3Line => d3Line // e.g. line => line.curve(d3.curveCatmullRom.alpha(0.9))
})
You can’t perform that action at this time.