CODEWITHSUNDEEP
d3.js
el_pup_le
el_pup_le

Reputation: 12179

Disable d3 brush resize

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.

Upvotes: 6

Views: 4074

Answers (8)

Bmil
Bmil

Reputation: 361

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

Upvotes: 0

poornendu shukla
poornendu shukla

Reputation: 11

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);`

Upvotes: 1

Case09
Case09

Reputation: 313

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

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

Upvotes: 0

Domonkos Horvath
Domonkos Horvath

Reputation: 39

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

.handle {
  pointer-events: none;
}

Upvotes: 3

Zizhang Ai
Zizhang Ai

Reputation: 103

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.

Upvotes: 0

Martina Ferrari
Martina Ferrari

Reputation: 440

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();

Upvotes: 0

Ilkka Outo
Ilkka Outo

Reputation: 79

Resize can be prevented by hiding the resize handles via css

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

Upvotes: 5

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

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);
}

Upvotes: 4

Related Questions