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

Question

问题：

我已经实现了 d3.js 树的一个版本，发现 here。

现在，在我的例子中，树并没有占据整个屏幕，但它可以方便地放入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 的边框时 - 能够通过拖动鼠标指针来调整它的大小（当然是点击时）。

---

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

到目前为止，我已经尝试过接受的答案here：

$('#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，并为其添加拖动行为。

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