title: JS error for d3-brush in d3 v4 implementation
body: <p>This sample worked fine for d3 v3 version. Its a trimmed version of <a href="http://bl.ocks.org/timelyportfolio/5c136de85de1c2abb6fc" rel="noreferrer">this sample</a> where on interaction with the buttons the brush gets animated in its new position.</p>
  
  <p>I am actually trying to do <a href="http://bl.ocks.org/timelyportfolio/5c136de85de1c2abb6fc" rel="noreferrer">this</a> using d3 v4 version.</p>
  
  <p>The trimming is done to identify the area of concern. The trimmed code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var margin = { top: 10, right: 10, bottom: 100, left: 40 },
        margin2 = { top: 430, right: 10, bottom: 20, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        height2 = 500 - margin2.top - margin2.bottom;
  
    var parseDate = d3.timeParse("%b %Y");
  
    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);
  
    var brush = d3.brushX(x2)
      .on("brush end", brushed);
  
    var area1 = d3.area()
      .curve(d3.curveMonotoneX)
      .x(function(d) { return x(d.date); })
      .y0(height)
      .y1(function(d) { return y(d.price); });
  
  var area2 = d3.area()
      .curve(d3.curveMonotoneX)
      .x(function(d) { return x2(d.date); })
      .y0(height2)
      .y1(function(d) { return y2(d.price); });
  
  
  
    // make some buttons to drive our zoom
    d3.select("body").append("div")
      .attr("id","btnDiv")
      .style('font-size','75%')
      .style("width","250px")
      .style("position","absolute")
      .style("left","5%")
      .style("top","200px")
  
    var btns = d3.select("#btnDiv").selectAll("button").data([2001, 2002, 2003, 2004])
  
    btns = btns.enter().append("button").style("display","inline-block")
  
    // fill the buttons with the year from the data assigned to them
    btns.each(function (d) {
      this.innerText = d;
    })
  
    btns.on("click", drawBrush);
  
    function drawBrush() {
      // define our brush extent to be begin and end of the year
      brush.extent([new Date(this.innerText + '-01-01'), new Date(this.innerText + '-12-31')])
  
      // now draw the brush to match our extent
      // use transition to slow it down so we can see what is happening
      // remove transition so just d3.select(".brush") to just draw
      brush(d3.select(".brush").transition());
  
      // now fire the brushstart, brushmove, and brushend events
      // remove transition so just d3.select(".brush") to just draw
      brush.event(d3.select(".brush").transition().delay(1000))
    }
  
  
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);
  
    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 + ")");
  
    d3.csv("sp500.csv", type, function(error, data) {
    if (error) throw error;
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.price; })]);
    x2.domain(x.domain());
    y2.domain(y.domain());
  
  
      context.append("g")
          .attr("class", "x brush")
          .call(brush)
        .selectAll("rect")
          .attr("y", -6)
          .attr("height", height2 + 7);
    });
  
    function brushed() {
      x.domain(brush.empty() ? x2.domain() : brush.extent());
    }
  
    function type(d) {
      d.date = parseDate(d.date);
      d.price = +d.price;
      return d;
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    font: 10px sans-serif;
  }
  
  .area {
    fill: steelblue;
    clip-path: url(#clip);
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  svg {
    font: 10px sans-serif;
  }
  
  .area {
    fill: steelblue;
    clip-path: url(#clip);
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  
  .brush .extent {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v4.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Please refer the <a href="https://jsfiddle.net/n4m1r8nb/162/" rel="noreferrer">fiddle</a> for correct error. The error is different when attached in the snippet</strong></p>
  
  <p>Any help is highly appreciable.</p>
  
  <p>Update:
  The error is </p>
  
  <blockquote>
    <p>d3.v4.js:12632 Uncaught TypeError: group.property is not a function</p>
  </blockquote>
  
  <p>Does anyone have a hunch whats the new API to resolve the error on clicking the buttons in this <a href="https://jsfiddle.net/n4m1r8nb/162/" rel="noreferrer">fiddle</a> It would be awesome if one can update a fiddle for it. Or just atleast let me know of the modified APIs because the samples worked fine for v3.</p>