Disable d3 brush resize

Question

Is it possible to have a brush that is a static width ie a brush that is not resizable? It would still need to be draggable. There doesn't seem to be anything indicating whether it's possible in the documentation.

Heddie

Answer 1

There's no explicit option for that, but all you need to do is reset the domain in the brush event handler, for example

var brush = d3.svg.brush().on("brush", brushed);

function brushed() {
  brush.extent(desiredDomain);
}

Superinduce

Answer 2

Resize can be prevented by hiding the resize handles via css

g.brush>.resize {
    display: none;
}

Folk

Answer 3

In D3.js v4.0 you can disable the pointer events in CSS for the SVG elements (handle rectangle).

.handle {
  pointer-events: none;
}

Trustworthy

Answer 4

with latest version of d3 you can make the handleSize(0) and it will make the handle bar with width 0.

    `const brush = d3.brushX().extent([
            [margin.left, margin.top],
            [chartRight, chartBottom],
        ])
        .handleSize(0);`

Annalist

Answer 5

Actually, manually resetting the extent does not seem to work well.

The solution I've found, which is hidden in the slider example, is to remove the resize element altogether:

// Create the brush normally.
var brush = d3.svg.brush()
    .x(xScale)
    .on("brush", brushed);

// Add it to a SVG group
var slider = context.append("g")
    .attr("class", "x brush")
    .call(brush);

// Remove the resize control
slider.selectAll(".resize").remove();

Weimer

Answer 6

I encountered exactly the same problem. I was using D3 4.0 and need to implement a fixed size brush along the x axis. I used drag.filter() function and modified elements inside .brush to achieve this:

var brush = d3.brushX()
            .filter(function () {return d3.mouse(this)[0] > brushStart && d3.mouse(this)[0] < brushStart + brushWidth})
            .extent([[0, 0], [width, height]])
            .on("end", brushended)
            .on('brush', beingBrushed);
svg.append('g')
    .attr('class', 'brush')
    .call(brush)
    .call(brush.move, [0, brushWidth]); //initial position
d3.selectAll('.brush>.handle').remove();

function brushended() {
    var s = d3.event.selection;
    if (s!== null) {
        brushStart = s[0];
    }
}

This way the brush allows dragging but not resizing.

Anxious

Answer 7

I just removed the .handle elements from graph with the brush:

contextGraph.selectAll('.handle').remove();

Day

Answer 8

handleSize is the answer to read - 1 min fix, rest are workarounds

Coralline