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

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

1 个答案: