Click and drag (or touch) to draw a line.
forked from mbostock's block: Line Drawing
license: gpl-3.0 |
Click and drag (or touch) to draw a line.
forked from mbostock's block: Line Drawing
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.line { | |
fill: none; | |
stroke: #000; | |
stroke-width: 3px; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
} | |
</style> | |
<svg width="960" height="500"> | |
<rect style="fill:#fff;" width="100%" height="100%"></rect> | |
</svg> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var activeLine; | |
var renderPath = d3.svg.line() | |
.x(function(d) { return d[0]; }) | |
.y(function(d) { return d[1]; }) | |
.interpolate("basis"); | |
var svg = d3.select("svg") | |
.call(d3.behavior.drag() | |
.on("dragstart", dragstarted) | |
.on("drag", dragged) | |
.on("dragend", dragended)); | |
function dragstarted() { | |
activeLine = svg.append("path").datum([]).attr("class", "line"); | |
} | |
function dragged() { | |
activeLine.datum().push(d3.mouse(this)); | |
activeLine.attr("d", renderPath); | |
} | |
function dragended() { | |
activeLine = null; | |
} | |
</script> |