d3.js - các thanh cách đều nhau trên thang thời gian

Question

Tôi đang xây dựng một ô bar trong d3.js trong đó mỗi thanh đại diện cho tổng số trường hợp TB trong một tháng. Dữ liệu về cơ bản bao gồm một ngày (chuỗi ban đầu ở định dạng% Y-% m, nhưng được phân tích bằng cách sử dụng d3.time.format.parse) và một số nguyên. Tôi muốn các nhãn trục tương đối linh hoạt (chỉ hiển thị ranh giới năm, nhãn mỗi tháng, v.v.), nhưng tôi cũng muốn các thanh được đặt cách đều nhau.

tôi có thể nhận dán nhãn trục linh hoạt khi tôi sử dụng một quy mô ngày:

var xScaleDate = d3.time.scale() 
    .domain(d3.extent(thisstat, function(d) { return d.date; })) 
    .range([0, width - margin.left - margin.right]); 

... nhưng các thanh không đều nhau do số ngày khác nhau trong mỗi tháng (ví dụ, tháng Hai và tháng Ba đáng chú ý gần nhau hơn so với các tháng khác). Tôi có thể nhận được các thanh đều nhau bằng cách sử dụng thang đo tuyến tính:

var xScaleLinear = d3.scale.linear() 
     .domain([0, thisstat.length]) 
     .range([0, width - margin.left - margin.right]); 

... nhưng tôi không thể tìm ra cách để có nhãn trục dựa trên ngày. Tôi đã cố gắng sử dụng cả hai quy mô đồng thời và chỉ tạo ra một trục từ xScaleDate, chỉ để xem điều gì sẽ xảy ra, nhưng quy mô tự nhiên không sắp xếp khá đúng.

Có cách nào đơn giản để đạt được điều này mà tôi đang thiếu không?

Answer 1

Hãy thử d3.scale.ordinal:

var y = d3.scale.ordinal() 
    .domain(yourDomain) 
    .rangeRoundBands([0, chartHeight], 0.2); 

Tweek 0,2 tham số.

Answer 2

Tôi đã có cùng một vấn đề, tôi đã kết thúc chấp nhận rằng một số tháng dài hơn những người khác và điều chỉnh chiều rộng thanh cột để khoảng cách giữa các thanh vẫn không đổi. Vì vậy, tinh chỉnh các chức năng barPath trong crossfilter nhà giới thiệu trang (http://square.github.com/crossfilter/ - sử dụng d3) Tôi có một cái gì đó như thế này:

var colWidth = Math.floor(x.range()[1]/groups.length) - 1;//9; 
if (i < n - 1) { 
    //If there will be column on the right, end this column one pixel to the left 
     var nextX = x(groups[i+1].key) 
     colWidth = nextX - x(d.key) - 1; 
} 
path.push("M", x(d.key), ",", height, "V", yVal, "h",colWidth,"V", height); 

Answer 3

Bạn có thể kết hợp quy mô thứ và thời gian:

// Use this to draw x axis 
var xScaleDate = d3.time.scale() 
    .domain(d3.extent(thisstat, function(d) { return d.date; })) 
    .range([0, width - margin.left - margin.right]); 

// Add an ordinal scale 
var ordinalXScale = d3.scale.ordinal() 
    .domain(d3.map(thisstat, function(d) { return d.date; })) 
    .rangeBands([0, width], 0.4, 0); 

// Now you can use both of them to space columns evenly: 
columnGroup.enter() 
    .append("rect") 
    .attr("class", "column") 
    .attr("width", ordinalXScale.rangeBand()) 
    .attr("height", function (d) { 
     return height - yScale(d.value); 
    }) 
    .attr("x", function (d) { 
     return xScaleDate(d.date); 
    }) 
    .attr("y", function (d){ 
     return yScale(d.value); 
    }); 

tôi đã tạo ra một ví dụ trong một thời gian trước đây để chứng minh phương pháp này: http://codepen.io/coquin/pen/BNpQoO