Fare un div d3 ridimensionabile con il drag

Question

Domanda:

Ho implementato una versione di un albero d3.js trovato here.

Ora, nel mio caso, l'albero non occupa l'intero schermo, ma è comodamente inserito in un div, poiché è solo una parte di una dashboard che ho creato.

Ecco il css del div dove l'albero è messo:

#tree-container { 
    border-style: solid; 
    border-width: 3px; 
    border-color: #b0c4de; 
    float:left; 
    position:relative; 
    top:2px; 
    margin-top: 5px; 
    margin-left: 10px; 
} 

Quello che voglio fare è: quando l'utente fa clic sul confine del div - di essere in grado di ridimensionare trascinando il puntatore del mouse (quando cliccato, ovviamente).

---

Quello che ho provato finora?

Finora, ho provato come indicato sulla risposta accettata here:

$('#tree-container').resizable({ 
    handles: 'n,w,s,e', 
    minWidth: 200, 
    maxWidth: 400 
}); 

Ma, questo non funziona. In realtà - è genera un errore:

Uncaught TypeError: undefined is not a function 

Quando provo in questo modo:

$('#tree-container').resize({ 
     handles: 'n,w,s,e', 
     minWidth: 200, 
     maxWidth: 400 
    }); 

esso non genera un errore, ma ancora non funziona.

Questo non funziona così:

$('#tree-container').resize({ 
     handles: 'n,w,s,e' 
    }); 

Tutte le idee su come posso risolvere questo problema?

Answer 1

È possibile ottenere questo con d3 da solo. Non c'è bisogno di jQuery UI.

È necessario creare un div in posizione assoluta all'interno del div ridimensionabile e aggiungervi un comportamento di trascinamento.

Here's a jsFiddle. Trascina il rettangolo arancione per ridimensionare.

Ecco il codice rilevante:

var resizable = d3.select('#resizable'); 
var resizer = resizable.select('.resizer'); 

var dragResize = d3.behavior.drag() 
    .on('drag', function() { 
     // Determine resizer position relative to resizable (parent) 
     x = d3.mouse(this.parentNode)[0]; 

     // Avoid negative or really small widths 
     x = Math.max(50, x); 

     resizable.style('width', x + 'px'); 
    }) 

resizer.call(dragResize);