hi,

I'm working on a graph with this code:

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

	<head>
		<meta charset="utf-8">
		<title>d3.js Learning csv data</title>
		<script type="text/javascript" src="js/d3.v3.min.js"></script>
		<style>
		/* 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;
		}
		</style>
	</head>

		<body>
			<script>
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")
						.append("svg")
						.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")
						.append("svg")
						.attr("width", width2 + margin.left + margin.right)
						.attr("height", height2 + margin.top + margin.bottom)
						.append("g")
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	

	
			//scales
			
			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]);				
			
			//axis
			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;
			xScale.domain([0,Laenge]); 
			yScale.domain([0,Breite]);
			x.call(xAxis); //aufrufen
			y.call(yAxis);
			
			//file		
			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; 
				svg.selectAll("rect").data(dataset)
							.enter()
							.append("rect")
							.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("fill","none")
							.style("pointer-events","none")
							.attr("stroke", function(d){return d.INFO_SCHWEREGRAD})
							.attr("stroke-width", "1px")
							.attr("stroke-opacity",0.4);

				})
			}	
//Maybe I have to add here some code 
	
		var brush = d3.svg.brush() //Constructs a new brush
			.x(xScale)
			.y(yScale)
			.extent([[Laenge/3,0.2],[2*Laenge/3,0.5]]) 
			.on("brushend",function(){
				var dataset_filtered = mydataset.filter(myfilter);
				
				
				x2Scale.domain([brush.extent()[0][0],brush.extent()[1][0]]);
				y2Scale.domain([brush.extent()[0][1],brush.extent()[1][1]]);
				x2.transition().call(x2Axis);
				y2.transition().call(y2Axis);
				

				//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 
						.append("rect")
						.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("fill","none")
						.style("pointer-events","none")
						.attr("stroke", function(d){return d.INFO_SCHWEREGRAD})
						.attr("stroke-width", "1px")
						.attr("stroke-opacity",0.4);
				
			
				
				}
				);
		
		
		svg.append("g")
			.attr("class", "brush")
			.call(brush);
				
		var dataconvert = function(d){ 
		drawDefects("1146741");
  ...
  ...
  ...
  ....
}			
			</script>
			<div id="container"></div>
			<div id="container2"></div>
		</body>
	</html>

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!