javascript - 通过拖动使 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);