Disabilita ridimensionamento pennello d3

Question

È possibile avere un pennello di larghezza statica, ovvero un pennello non ridimensionabile? Dovrebbe ancora essere trascinabile. Non sembra esserci nulla che indichi se è possibile nella documentazione.

Answer 1

Non c'è alcuna opzione esplicita per questo, ma tutto quello che dovete fare è ripristinare il dominio nel gestore di eventi pennello, per esempio

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

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

Answer 2

Resize può essere prevenuta nascondendo i pallini di ridimensionamento tramite CSS

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

Answer 3

In realtà, il ripristino manuale dell'estensione non sembra funzionare correttamente.

La soluzione che ho trovato, che è nascosto nell'esempio di scorrimento, è quello di rimuovere l'elemento di ridimensionamento del tutto:

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

Answer 4

ho incontrato esattamente lo stesso problema. Stavo usando D3 4.0 e ho bisogno di implementare un pennello di dimensioni fisse lungo l'asse x. Ho usato drag.filter() funzione ed elementi modificati all'interno .brush per ottenere questo:

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

questo modo il pennello permette trascinamento ma non ridimensionamento.

Answer 5

In D3.js v4.0 è possibile disabilitare gli eventi puntatore in CSS per gli elementi SVG (maniglia rettangolo).

.handle { 
 
    pointer-events: none; 
 
}