Question

I have a date scale in d3 and I’m looking to cap the x.domain()[0] to the first day of the month and x.domain()[1] to the last day of the month. Assume that the data set is something like

data : [
{date: '2011-12-31', amount: 200},
{date: '2012-01-01', amount: 100},
{date: '2012-01-02', amount: 300},
{date: '2012-01-03', amount: 400},
{date: '2012-02-01', amount: 400}
]

Its a contrived example but basically under this scenario cap the domain to the month of January. Looking for an easy d3esque solution.

Answer 1

I think what you are looking for is the .nice() function which makes a domain start and end on nice values (in your case, the first and last of the month). You will still need to filter your data, I don’t think there is any magic to automatically determine that you want to show January in this case vs December or February.

var data = [
    {date: new Date(2011,11,31), amount: 200},
    {date: new Date(2012,0,1), amount: 100},
    {date: new Date(2012,0,2), amount: 300},
    {date: new Date(2012,0,3), amount: 400},
    {date: new Date(2012,1,1), amount: 400}
];

var month = data.filter(function (d) { return d.date.getMonth() === 0; });

var x = d3.time.scale()
    .domain(d3.extent(month, function(d) { return d.date; }))
    .range([0, width])
    .nice(d3.time.month);

You can see an example of this at http://bl.ocks.org/3849376.