D3js Brush & Zoom

brushended not working

HTML

<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.js"></script>

<body>
  <div>
  </div>
</body>

CSS

#Type1 {
  stroke: DarkTurquoise;
}

#Type2 {
  stroke: steelblue;
}

.data-line {
  fill: none;
  stroke-width: 2.5;
  opacity: 0.8;
  stroke-linecap: round;
  clip-path: url(#clip);
  transition: 0.5s;
}

.context-line {
  fill: none;
  stroke-width: 1.5;
  stroke: grey;
  stroke-linecap: round;
  clip-path: url(#clip);
}

div.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

JavaScript

var svg = d3.select("div")
  .append("div").classed("svg-container", true)
  .append("svg")
  .attr("width", 700)
  .attr("height", 400)

var margin = {
    top: 20,
    right: 20,
    bottom: 130,
    left: 60
  },
  margin2 = {
    top: 300,
    right: 20,
    bottom: 30,
    left: 60
  },
  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom,
  height2 = +svg.attr("height") - margin2.top - margin2.bottom;

//    Achsen Datumsbehandlung
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");

var x = d3.scaleTime().range([0, width]),
  x2 = d3.scaleTime().range([0, width]),
  y = d3.scaleLinear().range([height, 0]);
y2 = d3.scaleLinear().range([height2, 0]);

var xAxis = d3.axisBottom(x)
  xAxis2 = d3.axisBottom(x2),
  yAxis = d3.axisLeft(y);

//Linien
var line = d3.line()
  .x(function(d) {
    return x(d.Datum);
  })
  //    .y0(height) //nur area-chType
  .y(function(d) {
    return y(d.Summe);
  });
//    .y1(function(d) { return y(d.Summe); }); //nur area-chType

//Linien
var lineType1 = d3.line()
  .curve(d3.curveStepAfter)
  .x(function(d) {
    return x(d.Datum);
  })
  .y(function(d) {
    return y(d.Summe);
  });

var line2 = d3.line()
  .x(function(d) {
    return x2(d.Datum);
  })
  .y(function(d) {
    return y2(d.Summe);
  });

svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

var focus = svg.append("g")
  .attr("class", "focus")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
  .attr("class", "context")
  .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

//Zoom & Brush
var brush = d3.brushX()
  .extent([
    [0, 0],
    [width, height2]
  ])
  .handleSize(10)
  .on("start brush", brushed)
  .on("end", brushended);

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .translateExtent([
    [0, 0],
    [width, height]
  ])
 ...