d3 chỉ hiển thị ngày chủ nhật:

Question

Tôi muốn cho quy mô của mình bắt đầu vào ngày đầu tiên và kết thúc vào ngày cuối cùng thay vì chỉ hiển thị Chủ nhật:

Tôi muốn dữ liệu bắt đầu tại: 28 (không 3) nhưng nó bắt đầu vào ngày 3 là Chủ Nhật:

Tôi có thể bắt đầu quy mô của mình vào bất kỳ ngày nào trong tuần?

Tôi muốn các ngày được hiển thị để khớp với dữ liệu tôi cung cấp cho biểu đồ không hiển thị Chủ Nhật.

Liên kết đến ví dụ: http://jsfiddle.net/3LZua/2/

Cảm ơn bạn trước.

P.S. Đây là mã: (sẽ có một trong html)

followerLineGraph = function(data) 
{  
    var width = 400; 

    var x = d3.time.scale() 
     .domain([data[0].date, data[data.length - 1].date]) 
     .range([0, width]); 

    var chart = d3.select("#test").append("svg").attr("class", "chart"); 

    //Date Label 
    var xAxis = d3.svg.axis() 
     .scale(x) 
     .ticks(data.length) 
     .tickFormat(d3.time.format('%m/%d-%a')) 
     .tickSize(0) 
     .tickPadding(8); 

    chart.append('g') 
     .attr('fill', '#1ff') 
     .call(xAxis); 
} 

    var data = [ 
     { date: new Date(2013, 1, 28), TotalLikes: 18 }, 
     { date: new Date(2013, 2, 14), TotalLikes: 15 }, 
     { date: new Date(2013, 2, 21), TotalLikes: 17 }, 
     { date: new Date(2013, 2, 28), TotalLikes: 17 }, 
     { date: new Date(2013, 3, 4), TotalLikes: 20 } 
]; 

followerLineGraph(data); 

Answer 1

Bạn có một vài lựa chọn ở đây.

Gọi "bọ ve" trên trục sẽ chuyển các đối số đến thang tỷ lệ cơ bản để có được một danh sách đánh dấu cho trục vẽ. Khi bạn chuyển vào một giá trị số duy nhất, thang đo sẽ cố gắng tạo ra các giá trị "đẹp". Giá trị số là một gợi ý về số lượng tick mà bạn có thể lý tưởng thích - nó không đảm bảo số bạn thực sự sẽ nhận được.

.ticks(5) 

kết quả trong: 03/03-Sun 10/03-Sun 17/03-Sun 24/03-Sun 31/03-Sun

Bởi vì bạn đang sử dụng một quy mô thời gian bạn cũng có tùy chọn để xác định lượng thời gian giữa ve, ví dụ:

.ticks(d3.time.days,7) 

kết quả trong: 01/03-Thứ Sáu 08/03-Thứ Sáu 15/03-Thứ Sáu 22/03-Thứ Sáu 29/03-Thứ Sáu 04/01-Mon

Điều này sẽ giv e bạn đánh dấu mỗi 7 ngày. Nhưng tôi nghĩ rằng nó vẫn sẽ cố gắng bao gồm các ranh giới thời gian "đẹp" như bắt đầu tháng.

Đối với các tình huống được điều chỉnh tốt (nhưng hơi tĩnh), bạn thực sự có thể chỉ định chính xác nơi bạn muốn bọ ve của mình sử dụng phương pháp tickValues ​​trên trục. Tôi sử dụng nó để thiết lập một cách chính xác tất cả các ngày điểm dữ liệu của bạn:

xAxis2.tickValues(data.map(function(d) { return d.date;})) 

Cuối cùng, bạn thực sự có thể vượt qua trong một cuộc tranh cãi với ve chức năng để có được chính xác ve bạn muốn mỗi lần. Chức năng này sẽ được sự khởi đầu và kết thúc như vậy để thiết lập ve cho những cộng với trung điểm tôi đã làm:

xAxis3.ticks(function(start, end) { 
    console.log(arguments); 
    var mid = new Date((start.getTime() + end.getTime())/2); 

Mặc dù trong trường hợp này có lẽ bạn nên thiết lập các chức năng trên quy mô như vậy thì bạn có thể tận dụng các bước đối số bằng cách gọi qua trục (xem thêm trong tài liệu d3).

Bạn có thể chơi với fiddle here.

Ngoài ra, hãy xem tài liệu về số scale ticks và axis tickValues. Ngoài ra còn có một hướng dẫn trục tuyệt vời here.

Answer 2

Tôi chỉ gặp phải vấn đề rất giống và tôi không thể tìm thấy câu trả lời trong tài liệu d3.Tuy nhiên, tôi liếc nhìn mã nguồn d3 (https://github.com/mbostock/d3/blob/master/d3.js) và tôi đã có thể tìm thấy những dòng sau:

d3.time.weeks = d3.time.sunday.range; 

Với gợi ý này trong tâm trí: Lưu ý rằng, như mô tả trong tài liệu hướng dẫn,

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(d3.time.weeks, 1); 

đưa ra một trục với một đánh dấu vào mỗi Chủ Nhật - và vì vậy

var xAxis = d3.svg.axis() 
    .scale(x) 
    .ticks(d3.time.xxxday.range, 1); 

đưa ra một trục với một đánh dấu trên mỗi xxxday, nơi xxxday là monday, tuesday, wednesday, thursday, friday, saturday hoặc sunday.