DS3 to Raphael Eraser

by veeramarni

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

JavaScript

setTimeout( function(){ 
    var width = 960
   ,height = 500
   ,eraser_radius = 20
   ,stroke_width = 3
   ,line = d3.svg.line()
   ,paths = []
   ,erase_path = {};
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "1px solid silver");
var mtouch = mtouch_events()
  .on('touch', touch)
	.on('drag', drag)
	.on('release', release);
var g_paths = svg.append('g')
  	.attr('id', 'paths');
var overlay = svg.append('rect')
    .style({fill: 'none', 'pointer-events': 'all'})
    .attr("width", width)
    .attr("height", height)
    .call(mtouch);
var g_erase = svg.append('g')
    .attr('id', 'erase');
mtouch.frame(overlay.node());
function touch() {
	var f = d3.event.finger;
	erase_path.data = [f.pos0.slice()];
	if (!erase_path.el) {
		erase_path.el = g_erase.append('path')
	                   .style('fill', 'none')
	                   .style('stroke', 'gray')
	                   .style('opacity', 0.3)
	                   .style('stroke-width', eraser_radius*2)
	                   .style('stroke-linecap', 'round')
	                   .style('stroke-linejoin', 'round');
	}
	erase_path.el.datum(erase_path.data)
	             .attr('d', function(d) { return line(d) + 'Z'});
}
function drag() {
	var f = d3.event.finger;
	erase_path.data.push(f.pos.slice());
	erase_path.el.attr('d', line);
}
function release() {
	paths = erase(paths, erase_path.data);
	update(paths);
}
function update(paths) {
	var p = g_paths.selectAll('path')
	  .data(paths);
	p.enter()
	 .append('path')
	 .style('fill', 'none')
	 .style('stroke', '#444')
	 .style('stroke-width', stroke_width)
	 .style('stroke-linecap', 'round')
	 .style('stroke-linejoin', 'round');
	p.attr('d', line);
	p.exit().remove();
}
paths.push([[20,20], [300,300]]);
paths.push([[100,50], [300,50]]);

update(paths);
}, 1000);
//================================================================
//...