bsr203/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.node .selected {
  stroke: red;
}

.link {
  stroke: #999;
}

.brush .extent {
  fill-opacity: .1;
  stroke: #fff;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  var brush = svg.append("g")
      .attr("class", "brush")
      .call(d3.svg.brush()
        .x(d3.scale.identity().domain([0, width]))
        .y(d3.scale.identity().domain([0, height]))
        .on("brushstart", brushstart)
        .on("brushend", brushend)
        );

function brushstart(p) {
   var eventTarget = d3.select(d3.event.target);
   var dragging = eventTarget.classed("extent");
   console.log("dragging", dragging)


}

function brushend(p) {
  var ext = brush.extent();
  console.log(ext)
}
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	.node .selected {
	stroke: red;
	}

	.link {
	stroke: #999;
	}

	.brush .extent {
	fill-opacity: .1;
	stroke: #fff;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var width = 960,
	height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var brush = svg.append("g")
	.attr("class", "brush")
	.call(d3.svg.brush()
	.x(d3.scale.identity().domain([0, width]))
	.y(d3.scale.identity().domain([0, height]))
	.on("brushstart", brushstart)
	.on("brushend", brushend)
	);

	function brushstart(p) {
	var eventTarget = d3.select(d3.event.target);
	var dragging = eventTarget.classed("extent");
	console.log("dragging", dragging)


	}

	function brushend(p) {
	var ext = brush.extent();
	console.log(ext)
	}
	</script>