Background
I have a zoomable time graph which I build incorporating the following code:
var x = d3.time.scale().range([0, 100]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(customformatter);
When the appropriate interval is years, it shows ticks of years. Months shows months, etc.
Problem
This works wonderfully, generating great ticks until I zoom down into weeks, at which point I need to be able to dictate what day of the week ticks show for (Sunday, monday, etc.). I am aware of the multiformat custom generator for tickFormat in which you can specify the format given the appropriate interval. That will not change the ticks, however. Is there a way to set the start of the weeks' rules while maintaining the tick generation that otherwise exists at the year, month, day (etc.) level? Can the default start date be set to some other day of the week for the d3 library?
This is hardly a recommendable answer to my own question, but if anyone is desperate one way is to override the source code in /src/time/week.js:
d3_time.week = d3_time.sunday;
d3_time.weeks = d3_time.sunday.range;
d3_time.weeks.utc = d3_time.sunday.utc.range;
d3_time.weekOfYear = d3_time.sundayOfYear;
Just swap out 'sunday' for another day of the week.
Related
I have a chart to display values across time, but there aren't data points for each day. The chart is just displaying dates on the X axis where data points exist. I want each date to have a vertical line, and the day displayed below for every day in the range (unless overlapping).
I'm using chart.ja version 4.2.1
Extra Points :-)
I would also know how to keep the dates from overlapping when a large range (lots of dates) is being plotted.
Lastly, is it possible to display the dates on three lines, where the top line is the day, the second line shows the month name (once) in the middle of the month, and the third line shows the year in the middle of the year.
I have an nvd3 line chart that needs to display every date in a month on the x axis. For the current month (July) I have generated 31 x,y pairs. However, the chart omits a couple of those data points. Most data points, actually, have the y coordinate set to null (because not all dates have data, but I still need to display every date).
This is how it looks now:
As you can see, there are some dates missing: 07/08/2018, 07/15/2018, 07/22/2018, 07/30/2018 and 07/31/2018.
This is my code:
chart.xAxis.ticks(weightData.length); // this is 31
chart.xAxis.rotateLabels(-35);
chart.xAxis.showMaxMin(false); // if this is true, even less data is displayed
Is there a way to force the chart do display all the data on the x axis?
I have found the answer here:
NVD3 Line Chart X Axis Ticks Are Missing
The point is to use tickValues() instead of ticks() as the answer on the post in link says.
I'm displaying a graph that dynamically deals with a wide range of values, and the x axis is all dates. When the graph is only displaying days of the months, hours, years, or months, it's fine, but between days of the month and months it stops rendering both axes. I know this because I'm using the slider to change how much data is displayed, and over certain ranges the slider stops showing movement and the axes aren't displayed.
I'm using the regular axes functions and epoch seconds in by data. any advice would be appreciated.
the below is the code i'm using to render the axes.
var xAxis_{{device_strip}} = new Rickshaw.Graph.Axis.Time({
graph:graph_{{device_strip}},
timeFixture: new Rickshaw.Fixtures.Time.Local()
});
xAxis_{{device_strip}}.render();
var yAxis_{{device_strip}} = new Rickshaw.Graph.Axis.Y({
graph:graph_{{device_strip}},
});
yAxis_{{device_strip}}.render();
I figured out that the issue I was having was caused by the version of d3 the project was using. It should have been using version 3 and it was instead it was using version 4.
I am currently creating a d3 axis using d3.time.scale.utc(). My input for the axis is a series of time offsets in minutes (with decimal values). For example:
var minuteOffsets = [0.03, 1.65, 3.22, ..., 89.91, 90.01];
I want to display these time offsets in mm:ss format on the axis. The axis labels can be at standard intervals, like so:
+------+------+-- ... --+------+------+-- ... --+------+
00:00 00:30 01:00 59:30 60:00 60:30 90:00 90:30
Note specifically that the minute value should show values >60. The seconds value has the normal range 0-59.
When I tried using .tickFormat(d3.time.format('%M:%S')), it wraps the minute value back to 00:00 after the 45:00 label. I also had a look at duration from moment.js, but I can't figure out how exactly to incorporate that into my code.
Based on the comment by Lars Kotthoff, I changed my scale to be a linear scale, instead of a time scale. Then I added a custom tickFormat function to do the necessary formatting.
I used MomentJS to first create a duration from the minute values, and then used the library moment-duration-format to produce the tick label in mm:ss format.
var axis = d3.svg.axis().tickFormat(function (d) {
return moment.duration(d, 'minutes')
.format('mm:ss', { trim: false });
});
This helps to avoid explicitly writing code for extracting the minute and second components, and then formatting them into a string.
I'm working with a time-based scatterplot and am using data which only parses times by month, hour and day. On my axis labels, I'm getting "1901". D3 seems to be choosing a year and displaying it. How can I easily get rid of this? I don't want any year displayed:
1901 example http://lmnts.lmnarchitects.com/wp-content/uploads/2014/04/2014-04-01-09_31_30-127.0.0.1_8020_Climate3_seattle-winter-temps.html.jpg
you need to set the tickFormat of your axis to display only months and days. The tickFormat receives a function that takes a date and returns a string. You can use d3.time.format to set the tick format:
var axis = d3.svg.axis()
// ... set more attributes
.tickFormat(d3.time.format('%b %d')); // Abbreviated month and decimal day (Apr 01)
Regards,