Гистограмма D3 в Angular - почему мои бары смещены относительно моих тиков? - PullRequest
Новая
       10

Гистограмма D3 в Angular - почему мои бары смещены относительно моих тиков?

0 голосов
/ 01 февраля 2019

У меня проблема с использованием графических данных осадков D3 из API погоды.

Столбцы смещены относительно отметок примерно на треть дня или 8 часов.Я думаю, что это как-то связано с часовыми поясами.API возвращает дату только в формате «гггг-мм-дд», без связи с часовым поясом.Таким образом, когда я преобразую его в объект даты (т.е. новую дату (d.date)), он устанавливает его в GMT или часовой пояс Тихого океана.Но кажется, что галочки находятся в другом часовом поясе.

Нужно ли где-нибудь запускать преобразование часового пояса?Если да, то как?

Если нет, почему мои бары смещены?

Я хочу, чтобы тики читались в формате "мм / дд", а подсказка - в "гггг / мм / дд ".

Вот как выглядит проблема на графике: enter image description here

Вот данные, с которыми мне нужно работать (ключпары значений, возвращаемые из API):

enter image description here

И вот весь мой код d3, который находится внутри компонента Angular 6: 

ngAfterViewInit() {
function timeConverter(UNIX_date) {
  var a = new Date(UNIX_date);
  // var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  var year = a.getFullYear();
  var month = months[a.getMonth()];
  var date = a.getDate()+1;
  var time = month + '/' + date ;
  // var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
  return time;
}

this.check = true;
var svg = d3.select("#" + this.input_id)
var margin = { top: 20, right: 20, bottom: 30, left: 0 }
if (window.screen.width < 1000) { // 768px portrait
  var width = 1000 - margin.left - margin.right
}
if (window.screen.width >= 1000) { // 768px portrait
  var width = parseInt(d3.select("#" + this.input_id).style("width")) - margin.left - margin.right
}
var height = 80 - margin.top - margin.bottom,
  barPadding = 5,
  barWidth = (width / (this.data2.length));

  //cpmvert time for the data
this.data2.forEach(function (d) {
  d.date = timeConverter(d.timestamp)

});

var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1)
  .domain(this.data2.map(function (d) { return d['date']; }));
var y = d3.scaleLinear().rangeRound([height, 0])
  .domain(<[Date, Date]>d3.extent(this.data2, function (d) { return d['precipitation']; }))

const tip = d3Tip()
tip.attr("class", "d3-tip")
  .style("background-color", '#f2f5f8')
  .style("padding", "10px")
  .style("color", "#0c2a47")
  .style("border", "1px solid #c3c3c3")
  .style("border-radius", "4px")
tip.html(d => {
  return ("<strong>Date:</strong>" + "<br>" + d['timestampUtc'] + "<br>" + "<strong>Precipitation: </strong>" + d['precipitation'] + " inches")
})
svg.call(tip)

g.selectAll(".bar")
  .data(this.data2)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function (d) { return x(d['date' ]); })
  .attr("y", function (d) { return y(d['precipitation']); })
  .attr("width", barWidth - barPadding)
  .attr("height", function (d) { return height - y(d['precipitation']); })
  .attr("fill", "#b2ddf0")
  .attr("margin-left", "20px")
  .on("mouseover", function (d) {
    tip.show(d, this);
  })
  .on('mouseout', function (d) { tip.hide(); })

var xaxis = d3.axisBottom(x)
  .tickPadding(10).tickFormat((domainn,number)=>{return ""});


svg.append("g")
  .attr("transform", "translate(0," + 50 + ")")
  .attr("fill", "#3c3c3c")
  .call(d3.axisBottom(x))
}

Кстати, причина, по которой я запускаю функцию 'timeConverter', заключается в том, чтобы переформатировать тик, чтобы не включать год.Подсказка читает из другого ключа, включая год.Я добавил +1 к дате, так как она почему-то отстала от дня.

Любая и вся помощь очень ценится!Дайте мне знать, что вы думаете.Спасибо!

...