Make a d3 div resizable by drag

Question

Question:

I have implemented a version of a d3.js tree found here.

Now, in my case, the tree doesn't take the whole screen, but it is conveniently put into a div, since it is just a part of a dash-board I've created.

Here is the css of the div where the tree is put:

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

What I want to do is: when the user clicks on the boarder of the div - to be able to resize it by dragging the pointer of the mouse (when clicked, of course).

---

What I've tried so far?

So far, I've tried like shown on the accepted answer here:

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

But, this doesn't work. In fact - it raises an error:

Uncaught TypeError: undefined is not a function 

When I try like this:

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

it doesn't raise an error, but it still doesn't work.

This doesn't work as well:

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

Any ideas of how can I solve this problem?

Answer 1

You can achieve this with d3 alone. No need for jQuery UI.

You need to create an absolutely positioned div inside the resizable div, and add a drag behavior to it.

Here's a jsFiddle. Drag the orange rectangle to resize.

Here's the relevant 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);