D3JS drawing application

D3 is an amazing library that I'm starting to understand. Here's an example of how amazing:

A drawing application in 17 lines (not counting closing braces as lines).


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;
}

Comments

Popular Posts