D3 Curve Editor

JavaScript library for editing curves

Usage

Include it in your html:

<script src="https://cdn.jsdelivr.net/npm/d3@4.10.2/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-curve-editor@0.2.0/build/d3-curve-editor.min.js"></script>
<link  href="https://cdn.jsdelivr.net/npm/d3-curve-editor@0.2.0/build/d3-curve-editor.css" rel="stylesheet" type="text/css"></link>

Or install from NPM

import * as D3CE from 'd3-curve-editor';

Create SVG container

<svg tabindex="1" id="editor"></svg>

Add lines

var lines = [];
lines.push(new D3CE.Line("#47a",[
                     new D3CE.CurvePoint(0,0).isFixed(true),
                    new D3CE.CurvePoint(1,1)
            ]));
lines.push(new D3CE.Line("#fd3",[
                    new D3CE.CurvePoint(0.2,0),
                    new D3CE.CurvePoint(1,0.4)
            ]));

Initialize editor

var container = querySelector('#editor');
 
var editor = new D3CE.CurveEditor(container,lines,{curve: d3.curveCatmullRom});
editor.eventListener.on('change',()=>{});

For details see demo

Dependencies

• D3.js

License

MIT