Angular中的D3条形图-为什么我的条形偏离了刻度线？

Question

使用D3绘制来自天气API的降水量数据时遇到问题。

条形图与刻度线之间的偏移量约为一天的三分之一，即8个小时。我认为这与时区有关。 API仅以“ yyyy-mm-dd”格式返回日期，与时区无关。因此，当我将其转换为日期对象（即新的Date（d.date））时，会将其设置为GMT或太平洋时区。但似乎滴答声在不同的时区。

我是否需要在某个地方运行时区转换？如果可以，怎么办？

如果没有，为什么我的杠偏移？

我希望刻度线以“ mm / dd”格式读取，但工具提示以“ yyyy / mm / dd”格式读取。

以下是该图上的问题：

这是我必须使用的数据（从API返回的键值对）：

这是我所有的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，因此至今为止。

任何帮助都将不胜感激！让我知道你的想法。谢谢！