Vô hiệu hóa bàn chải d3 thay đổi kích thước

Question

Có thể có một bàn chải có chiều rộng tĩnh tức là bàn chải không thể thay đổi kích thước không? Nó vẫn cần phải có thể kéo được. Có vẻ như không có bất cứ điều gì chỉ ra cho dù nó có thể trong tài liệu.

Answer 1

Không có tùy chọn rõ ràng cho điều đó, nhưng tất cả các bạn cần làm là thiết lập lại các miền trong xử lý sự kiện bàn chải, ví dụ

var brush = d3.svg.brush().on("brush", brushed); 

function brushed() { 
    brush.extent(desiredDomain); 
} 

Answer 2

Resize thể được ngăn ngừa bằng cách ẩn nút định cỡ qua css

g.brush>.resize { 
    display: none; 
} 

Answer 3

Thực ra, đặt lại theo cách thủ công phạm vi có vẻ không hoạt động tốt.

Các giải pháp tôi đã tìm thấy, được giấu trong ví dụ trượt, là để loại bỏ các yếu tố thay đổi kích thước hoàn toàn:

// Create the brush normally. 
var brush = d3.svg.brush() 
    .x(xScale) 
    .on("brush", brushed); 

// Add it to a SVG group 
var slider = context.append("g") 
    .attr("class", "x brush") 
    .call(brush); 

// Remove the resize control 
slider.selectAll(".resize").remove(); 

Answer 4

tôi gặp phải chính xác cùng một vấn đề. Tôi đã sử dụng D3 4.0 và cần phải thực hiện một brush kích thước cố định dọc theo trục x. Tôi đã từng drag.filter() chức năng và các yếu tố biến đổi bên trong .brush để đạt được điều này:

var brush = d3.brushX() 
      .filter(function() {return d3.mouse(this)[0] > brushStart && d3.mouse(this)[0] < brushStart + brushWidth}) 
      .extent([[0, 0], [width, height]]) 
      .on("end", brushended) 
      .on('brush', beingBrushed); 
svg.append('g') 
    .attr('class', 'brush') 
    .call(brush) 
    .call(brush.move, [0, brushWidth]); //initial position 
d3.selectAll('.brush>.handle').remove(); 

function brushended() { 
    var s = d3.event.selection; 
    if (s!== null) { 
     brushStart = s[0]; 
    } 
} 

Bằng cách này, bàn chải cho phép kéo nhưng không thay đổi kích thước.

Answer 5

Trong D3.js v4.0, bạn có thể tắt các sự kiện con trỏ trong CSS cho phần tử SVG (hình chữ nhật xử lý).

.handle { 
 
    pointer-events: none; 
 
}