javascript - Make a d3 div resizable by drag - Stack Overflow

admin管理员组

文章数量:1353132

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?

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?

• javascript
• jquery
• html
• css
• d3.js

Share Improve this question Follow edited May 23, 2017 at 12:00 CommunityBot 111 silver badge asked Sep 11, 2014 at 9:11 BelphegorBelphegor 4,7661111 gold badges3636 silver badges6060 bronze badges 7

• Do you include jQuery-UI instead of just jQuery? – Baz Commented Sep 11, 2014 at 9:17
• I includ jQuery in the head of my html like this: <script src="jquery-1.10.2.min.js"></script> – Belphegor Commented Sep 11, 2014 at 9:22
• You also need to include jQuery UI – Baz Commented Sep 11, 2014 at 9:23
• This seems to have a lot of files. What do I need more precisely to include? – Belphegor Commented Sep 11, 2014 at 9:26
• 1 You'll need "UI Core" and from "Interactions" you'll need "Resizable". Like this. – Baz Commented Sep 11, 2014 at 9:28

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 10

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

本文标签： javascriptMake a d3 div resizable by dragStack Overflow