I'm working on a graph with this code:

	<!DOCTYPE html>
	<html lang="en">

		<meta charset="utf-8">
		<title>d3.js Learning csv data</title>
		<script type="text/javascript" src="js/d3.v3.min.js"></script>
		/* svg styles!! */
		.axis path,
		.axis line {
			fill: none;
			stroke: black;
			shape-rendering: crispEdges;
		.axis text {
			font-family: sans-serif;
			font-size: 11px;	
		.brush .extent {
		  fill-opacity: .2;							
		  stroke: #fff;
		  shape-rendering: crispEdges;

window.onload = function(){			
			// define dimensions of canvas
			var margin = {top: 80, right: 80, bottom: 80, left: 80},
				width = 800 - margin.left - margin.right,
				height = 300 - margin.top - margin.bottom,
				width2 = 800 - margin.left - margin.right,
				height2 = 400 - margin.top - margin.bottom;
			var mydataset = {};//global verfügbar  machen
			// Add an SVG element with the desired dimensions and margin.
			var svg = d3.select("#container")
						.attr("float", "left")
						.attr("width", width + margin.left + margin.right)
						.attr("height", height + margin.top + margin.bottom)
						.append("g") //Elemente gruppieren
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //do a transformation where by it translates the element and its children by 80 units 
			// Add an second SVG element with the desired dimensions and margin.
			var svg2 = d3.select("#container2")
						.attr("width", width2 + margin.left + margin.right)
						.attr("height", height2 + margin.top + margin.bottom)
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

			var xScale = d3.scale.linear().range([0, width]); //Constructs a new linear scale with this range and domain(s.unten)
			var yScale = d3.scale.linear().range([height, 0]);	

			var x2Scale = d3.scale.linear().range([0, width2]);
			var y2Scale = d3.scale.linear().range([height2, 0]);				
			var	xAxis = d3.svg.axis().scale(xScale).tickSize(-height).tickSubdivide(true), //sets the scale and returns the axis
				yAxis = d3.svg.axis().scale(yScale).ticks(4).orient("right"); //orientation right(vertical axis with ticks to the right of the domain path)

			var	x2Axis = d3.svg.axis().scale(x2Scale).tickSize(-height2).tickSubdivide(true),
				y2Axis = d3.svg.axis().scale(y2Scale).ticks(4).orient("right");	

			// Add the x-axis.
			var x = svg.append("g") 
			  .attr("class", "x axis")
			  .attr("transform", "translate(0," + height + ")");

			// Add the y-axis.
			var y = svg.append("g")
			  .attr("class", "y axis")
			  .attr("transform", "translate(" + width + ",0)");
			var x2 = svg2.append("g")
			  .attr("class", "x axis")
			  .attr("transform", "translate(0," + height2 + ")");

			// Add the y-axis.
			var y2 = svg2.append("g")
			  .attr("class", "y axis")
			  .attr("transform", "translate(" + width2 + ",0)");  
			//domain wird festgelegt
			var Breite = 1.274;
			var Laenge = 2191.094;
			x.call(xAxis); //aufrufen
			var drawDefects = function(id){
				d3.csv("data/"+id+"_OS.csv", dataconvert,  
				function(error, dataset){
				//	defects_rect = svg.selectAll("rect").data(dataset);
				//more elements
				mydataset = dataset; 
							.attr("x", function(d){return xScale(d.Y_START) +"px"})
							.attr("y", function(d){return yScale(d.X_START)+"px"})
							.attr("width", function(d){ return Math.ceil(d.DIM_LAENGE/width)+"px"})
							.attr("height", function(d){return Math.ceil(d.DIM_BREITE/height)+"px";})
							.attr("stroke", function(d){return d.INFO_SCHWEREGRAD})
							.attr("stroke-width", "1px")

//Maybe I have to add here some code 
		var brush = d3.svg.brush() //Constructs a new brush
				var dataset_filtered = mydataset.filter(myfilter);

				//second graph(zoom)
				svg2.selectAll("rect").data([]).exit().remove(); // Alles erst mal raus
				var defects = svg2.selectAll("rect").data(dataset_filtered);  //The result of the data operator is the update selection
				defects.enter()		//placeholder nodes for each data element 
						.attr("x", function(d){return x2Scale(d.Y_START) +"px"})
						.attr("y", function(d){return y2Scale(d.X_START)+"px"})
						.attr("width", function(d){ 
								return Math.ceil(d.DIM_LAENGE*width2/(brush.extent()[1][0]-brush.extent()[0][0]))+"px"
								}) //Math.ceil(x) function returns the smallest integer greater than or equal to a number "x".
						.attr("height", function(d){
								return Math.ceil(d.DIM_BREITE*height2/(brush.extent()[1][1]-brush.extent()[0][1]))+"px";
						.attr("stroke", function(d){return d.INFO_SCHWEREGRAD})
						.attr("stroke-width", "1px")
			.attr("class", "brush")
		var dataconvert = function(d){ 
			<div id="container"></div>
			<div id="container2"></div>

I think on the constructed brush is something missed. I need a brush component to implement focus + context zooming.
The zooming works(showing in a 2nd graph) but I can't create a new brush if I click somewhere else on the graph. maybe I can do it with .on("click"..) or brushstart and brushend?
How can I do it?

Thanks in advance!