通过拖动使d3 div可调整大小

Question

题:

我已经d3.js在这里找到了一个树的版本.

现在,在我的情况下,树不占用整个屏幕,但它很方便地放入div,因为它只是我创建的仪表板的一部分.

这div是放置树的位置的css :

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

我想要做的是:当用户点击边界时div- 通过拖动鼠标指针(当然,点击时)可以调整它的大小.

---

到目前为止我尝试过什么？

到目前为止,我已经试过像接受的答案显示在这里:

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

但是,这不起作用.事实上 - 它引发了一个错误:

Uncaught TypeError: undefined is not a function 

当我尝试这样的时候:

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

它不会引发错误,但它仍然无效.

这不起作用:

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

有关如何解决这个问题的任何想法？

Answer 1

你可以单独使用d3来实现这一点.不需要jQuery UI.

您需要在可调整大小的div中创建一个绝对定位的div,并为其添加拖动行为.

这是一个jsFiddle.拖动橙色矩形以调整大小.

这是相关的代码:

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