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

Question

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

javascriptjqueryhtmlcssd3.js

7

问题:

我实现了一个版本的 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;
}

我想做的是：当用户点击

元素的边框时，能够通过拖动鼠标指针来调整其大小（当然，在点击时）。

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

到目前为止，我已经尝试了像这里所示的答案：

$('#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'
    });

有什么办法可以解决这个问题吗？

- Belphegor

我在HTML的头部像这样引入jQuery：<script src="jquery-1.10.2.min.js"></script> - Belphegor

这个似乎有很多文件。我需要更精确地包含什么？ - Belphegor

1

你需要使用 "UI Core" 和 "Interactions" 中的 "Resizable"。就像这里所示。 - Baz

这绝对是一个开始，但我仍然无法使其工作。你能提供一个代码示例吗？ - Belphegor

好的，这里有很多代码示例（http://jqueryui.com/resizable/）。到目前为止我自己还没有使用过它。 - Baz

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meetamit · Accepted Answer

您可以仅使用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);