cum se configurează intervalul de timp pentru d3.js (Programare, Datetime, D3.Js)

user1270605 a intrebat.

Am încercat să setez intervalul de timp de configurare .ticks(d3.time.days, 2) pentru xAxis în acest.

var data = [{"date":"2012-03-20","total":3},{"date":"2012-03-21","total":8},{"date":"2012-03-22","total":2},{"date":"2012-03-23","total":10},{"date":"2012-03-24","total":3},{"date":"2012-03-25","total":20},{"date":"2012-03-26","total":12}, {"date":"2012-03-27","total":22}, {"date":"2012-03-28","total":21}, {"date":"2012-03-29","total":12}, {"date":"2012-03-30","total":12}, {"date":"2012-03-31","total":12}, {"date":"2012-04-1","total":12}];

var margin = {top: 40, right: 40, bottom: 40, left:40},
    width = 600,
    height = 500;

var x = d3.time.scale()
    .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
    .rangeRound([0, width - margin.left - margin.right]);

var y = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.total; })])
    .range([height - margin.top - margin.bottom, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.days, 2)
    .tickFormat(d3.time.format('%a %d'))
    .tickSize(0)
    .tickPadding(20);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .tickPadding(8);

var svg = d3.select('body').append('svg')
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

svg.selectAll('.chart')
    .data(data)
  .enter().append('rect')
    .attr('class', 'bar')
    .attr('x', function(d) { return x(new Date(d.date)); })
    .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.total)) })
    .attr('width', 10)
    .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.total) });

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
    .call(xAxis);

    svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis);

Dar intervalul de timp este sâmbătă 31 – duminică 1. Vreau să fie sâmbătă 31 – luni 2.

Iată un jsFiddle.

Comentarii

  • Postați codul în întrebare, nu un link –  > Por Chris Loonam.
  • @ChrisLoonam De fapt, ambele sunt mai bune. –  > Por Jesse.
  • Cod configurare interval de timp : var xAxis = d3.svg.axis() .scale(x) .orient(‘bottom’) .ticks(d3.time.days, 2) .tickFormat(d3.time.format(‘%a %d’))); Dar interval de timp: Sat 31 – Sun 1. Vreau ca intervalul de timp să fie Sat 31 – Mon 2… Vă rog să mă ajutați…  > Por utilizator1270605.
1 răspunsuri
ValarDohaeris

Am actualizat vioara dvs., secțiunea relevantă este următoarea:

var startDate = new Date(data[0].date);
var endDate = new Date(data[data.length - 1].date);

var everyOtherIncorrect = d3.time.day.range(startDate, endDate, 2);

var everyDate = d3.time.day.range(startDate, endDate);
var everyOtherCorrect = everyDate.filter(function (d, i) {
    return i % 2 == 0;
});

Problema ta este că d3.time.day.range(start, end, 2) nu generează de fapt o dată la două zile, ci începe întotdeauna la data de 1 a lunii. (Cf. referința D3 API)

Aceeași problemă apare atunci când se utilizează

d3.svg.axis().ticks(d3.time.days, 2)

Deci, dacă înlocuiți acest lucru cu datele generate manual, veți obține rezultatul dorit:

d3.svg.axis().tickValues(everyOtherCorrect)