D3 Examples - Line Drawing

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.line {
  fill: none; 
  stroke: red;
  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.v4.0.0-alpha.22.min.js"></script>
<script>
​
var activeLine;
​
var renderPath = d3.line()  
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; });
  
  var drag = d3.drag();
//   .on("dragstart", dragstarted)
//       .on("drag", dragged)
//       .on("dragend", dragended);
​
var svg = d3.select("svg")
    .call(b);
​
function dragstarted() {
  activeLine = svg.append("path").datum([]).attr("class", "line");
  activeLine.transition().style("{stroke:blue;}")
}
​
function dragged() {
  activeLine.datum().push(d3.mouse(this));
  activeLine.attr("d", renderPath);
}
​
function dragended() {
  activeLine = null;
  svg.selectAll("path").transition().attr("fill","orange");
}
​
</script>
​
    