CODEWITHSUNDEEP
javascriptdated3.js
ThomasE
ThomasE

Reputation: 409

d3.timeWeek ,1st day of the week

I have an issue with D3.timeWeek- that I use to specify ticks on my x-axis:

    plotXaxis: function (svg) {
  var x = d3scaleTime()
    .domain(
      d3extent(this.series, function (d) {
        return d.date;
      })
    )
    .range([0, this.width]);

  svg
    .append("g")
    .attr("transform", "translate(0," + this.height + ")")
    .call(
      d3axisBottom(x)
        .ticks(d3timeWeek.every(1))
        .tickFormat(d3timeFormat("%d. %b"))
    );

This gives me a very nice x-axis with a tick for each week in the data. The problem is that D3 means that a week starts on a Sunday, so the dates on my x-axis are all Sunday - like 07-03-2021 instead of 08-03-2021.

I want it to start on a Monday to fit the culture in Denmark, I had hoped for some culture setting on d3.timeWeek?

Upvotes: 2

Views: 1015

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Just use d3.timeMonday:

const svg = d3.select("svg");
const now = new Date;
const x = d3.scaleTime()
  .domain([d3.timeMonth.floor(now), d3.timeMonth.ceil(now)])
  .range([20, 480]);

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(d3.axisBottom(x)
    .ticks(d3.timeMonday.every(1))
    .tickFormat(d3.timeFormat("%d. %b"))
  );
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500"></svg>

Upvotes: 3

Related Questions