ein d3 div per Drag resizable Machen

Question

Frage:

ich eine Version eines d3.js Baum here gefunden umgesetzt haben.

Nun, in meinem Fall, nimmt der Baum nicht den ganzen Bildschirm, aber es ist bequem in eine div, da es nur ein Teil eines Dashboards ist, das ich erstellt habe. Hier

ist die CSS der div, wo der Baum gelegt wird:

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

Was ich tun möchte, ist: wenn der Benutzer klickt auf der Grenze der div - in der Lage sein, es zu verkleinern, indem Sie der Zeiger der Maus (wenn natürlich geklickt).

---

Was ich bisher ausprobiert habe?

Bisher habe ich wie here auf der akzeptierte Antwort gezeigt versucht:

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

Aber das funktioniert nicht. In der Tat - es löst einen Fehler:

Uncaught TypeError: undefined is not a function 

Wenn ich so versuchen:

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

es macht keinen Fehler, aber es funktioniert immer noch nicht.

funktioniert das nicht so gut:

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

Irgendwelche Ideen, wie kann ich dieses Problem lösen?

Answer 1

Sie können dies mit d3 allein erreichen. Keine Notwendigkeit für jQuery UI.

Sie müssen ein absolut positioniertes div im resizierbaren div erstellen und ein Ziehverhalten hinzufügen.

Here's a jsFiddle. Ziehen Sie das orangefarbene Rechteck, um die Größe zu ändern.

Hier ist der entsprechende Code:

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