D3.js - updating the timeline to v4 - error brushes

Question

I am trying to update this timeline chart code from v3 to v4. I have a mistake with a brush, I'm not sure how to solve it.

// current jsfiddle http://jsfiddle.net/0ht35rpb/173/

I get the error "Can't read property" 0 "from undefined"

I tried to follow this example https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172

Are the brushes different? Valid Degree Properties?

//brush
var brush = d3.brushX()
                //.x(x)
                .on("brush", display);




function display() {
    var rects, labels,
        minExtent = brush.extent()[0],
        maxExtent = brush.extent()[1],
        visItems = items.filter(function(d) {return d.starting_time < maxExtent && d.ending_time > minExtent;});

    mini.select(".brush")
        .call(brush.extent([minExtent, maxExtent]));

    x1.domain([minExtent, maxExtent]);

    //update main item rects
    rects = itemRects.selectAll("rect")
            .data(visItems, function(d) { return d.id; })
            .attr("x", function(d) {return x1(d.starting_time);})
            .attr("width", function(d) {return x1(d.ending_time) - x1(d.starting_time);});

    rects.enter().append("rect")
        .attr("class", function(d) {return "miniItem";})
        .attr("x", function(d) {return x1(d.starting_time);})
        .attr("y", function(d) {return y1(d.lane) + 10;})
        .attr("fill", function(d, i) {
            return colores_background(d.lane);
        })
        .attr("width", function(d) {return x1(d.ending_time) - x1(d.starting_time);})
        .attr("height", function(d) {return .8 * y1(1);});

    rects.exit().remove();

    //update the item labels
    labels = itemRects.selectAll("text")
        .data(visItems, function (d) { return d.id; })
        .attr("x", function(d) {return x1(Math.max(d.starting_time, minExtent) + 2);});

    labels.enter().append("text")
        .text(function(d) {return d.text;})
        .attr("x", function(d) {return x1(Math.max(d.starting_time, minExtent));})
        .attr("y", function(d) {return y1(d.lane + .5);})
        .attr("fill", function(d, i) {
            return colores_foreground(d.lane);
        })
        .attr("text-anchor", "start");

    labels.exit().remove();
}