D3 Examples - Line Drawing PRAC

xxxxxxxxxx
 
<!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() {
  console.log(activeLine.datum());  
  activeLine = null;
}
  
​
</script>
​
    