d3 chỉ đánh dấu trên các số nguyên

Question

Tôi có biểu đồ thanh d3 có giá trị từ 0-3. Tôi muốn trục y chỉ hiển thị các giá trị số nguyên mà tôi có thể thực hiện bởi

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d")); 

Tuy nhiên, vẫn còn dấu tick ở dấu không phải số nguyên. Đặt định dạng đánh dấu chỉ ẩn các nhãn đó. Tôi có thể thiết lập một cách rõ ràng số lượng tick hoặc giá trị tick, nhưng những gì tôi muốn làm là chỉ có thể xác định rằng các dấu tick chỉ xuất hiện ở các giá trị số nguyên. Điều đó có thể không?

Answer 1

Bạn có thể thêm .ticks (4) và .tickSubdivide (0) như tôi đã làm dưới đây:

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("right") 
    .ticks(4) 
.tickFormat(d3.format("d")) 
    .tickSubdivide(0); 

Answer 2

Bạn programatically có thể thiết lập số tick để data.length - 1 (giải quyết điều này vấn đề bạn gặp phải đối với số lượng nhỏ bọ ve là tốt)

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("right") 
    .tickFormat(d3.format("d")) 
    .ticks(data.length - 1) 

Answer 3

Sử dụng TIP này để làm việc này trên biểu đồ động (1 hoặc nhiều biểu đồ trên trang)

Đó là mẹo. Tôi đã thay đổi thành Math.min (maxHeight + 1, yAxis.ticks()) vì vậy nếu chiều cao của biểu đồ nhỏ hơn so với số lượng bọ ve, nó sẽ làm giảm số lượng bọ ve. - Jeff Storey 28 tháng 11 '12 tại 2:47

// It is either 10 or Maximum Chart height + 1 

     var graphValues = selection.data()[0].map(function(obj) { 
      return obj['count']; 
     }).compact(); 

     Array.prototype.maxValArray = function() { 
      return Math.max.apply(null, this); 
     }; 

     var maxValue = graphValues.maxValArray(); 

     yAxis.ticks(Math.min(maxValue + 1, 10)) 

Answer 4

Từ tất cả các giải pháp được liệt kê, tôi đã không thể thoát khỏi tắt dấu tick.

.xAxis().ticks(4) 
.tickFormat(d3.format("d")); 

xóa nhãn nhưng không phải là bọ ve.

Vì vậy, tôi đề xuất áp dụng ngưỡng trên ve(). Nếu nhỏ hơn 4 thì nó được đặt thành giới hạn (0,1,2,3). Được thực hiện với:

.on("preRedraw", function(chart) { 
    var maxTick = chart.group().top(1)[0].value; 
    if (maxTick < 4) { 
     chart.xAxis().ticks(maxTick); 
    } else { 
     chart.xAxis().ticks(4); 
    } 

});

Một jsfiddle có sẵn từ https://jsfiddle.net/PBrockmann/k7qnw3oj/

Hãy cho tôi biết nếu có một giải pháp đơn giản hơn. Kính trọng