Thực hiện một div d3 thay đổi kích thước bằng cách kéo

Question

Câu hỏi:

tôi đã thực hiện một phiên bản của một cây d3.js tìm thấy here.

Bây giờ, trong trường hợp của tôi, cây không chiếm toàn bộ màn hình, nhưng nó được đặt thuận tiện vào một div, vì nó chỉ là một phần của bảng gạch ngang mà tôi đã tạo.

Đây là css của div nơi cây được đặt:

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

Những gì tôi muốn làm là: khi người dùng nhấp vào các học sinh nội trú của div - để có thể thay đổi kích thước bằng cách kéo con trỏ chuột (khi được nhấp, tất nhiên).

---

Tôi đã thử gì cho đến nay?

Cho đến nay, tôi đã cố gắng như hiển thị trên câu trả lời chấp nhận here:

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

Nhưng, điều này không làm việc. Trong thực tế - nó đặt ra một lỗi:

Uncaught TypeError: undefined is not a function 

Khi tôi cố gắng như thế này:

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

nó không gây lỗi, nhưng nó vẫn không hoạt động.

này không làm việc cũng như:

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

Bất kỳ ý tưởng về làm thế nào tôi có thể giải quyết vấn đề này?

Answer 1

Bạn có thể đạt được điều này chỉ với d3. Không cần jQuery UI.

Bạn cần tạo một div được định vị hoàn toàn bên trong div có thể thay đổi kích thước và thêm hành vi kéo vào đó.

Here's a jsFiddle. Kéo hình chữ nhật màu cam để thay đổi kích thước.

Dưới đây là các mã có liên quan:

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