D3 刻度线在 xAxis 上略微偏离答案

【问题标题】：D3 Tick marks slightly off on xAxisD3 刻度线在 xAxis 上略微偏离
【发布时间】：2019-03-12 21:23:35
【问题描述】：

在创建 D3 面积图时，我注意到我的 X 轴刻度线略微向右移动：

对于我的代码，我生成 xAxis 如下：

const x = d3.scaleTime()
    .domain(d3.extent(data, d => Date.parse(d.date)))
    .range([margin.left, width - margin.right]);

const xAxis = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3
        .axisBottom(x)
        .tickValues(data.map(d => {
            return timeParse(d.date);
        }))
            .tickFormat(timeFormat)
            .tickSizeOuter(0)
        )

svg.append("g")
    .call(xAxis);

不确定我做错了什么导致刻度线略微向右移动。如果我不包括.tickSizeOuter(0) 部分，则开始和结束刻度线看起来在正常位置，但数据点刻度线仍然关闭。

如何将这些调整到正确的位置？

编辑

这是我的这张图表的数据：

data = [
    {date: "2019-02-01", value: 100}, 
    {date: "2019-03-01", value: 1}]
]

这是timeParse var：

var timeParse = d3.timeParse("%Y-%m-%d");

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

您可能会同时使用 UTC 和本地时区。对于您使用 Date.parse(d.date) 的域。它假设 UTC 时区（因为格式是 YYYY-MM-DD，从 ES5 开始的新行为），而 d3.timeParse 使用本地时区。这可能会有所帮助： Why does Date.parse give incorrect results?

【讨论】：

【解决方案2】：

正如@Chris 和@Noleli 在他的上述回答中所说，我混淆了 UTC/TimeZone。所以在稍微研究了一下之后，我发现了一个可以使用的新功能。而不是使用d3.timeParse 作为我的解析函数：

var timeParse = d3.timeParse("%Y-%m-%d");

D3 还提供了d3.utcParse 解析函数。

var timeParse = d3.utcParse("%Y-%m-%d");

使用它可以提供正确的结果。

【讨论】：

【解决方案3】：

没有看到您的数据或timeParse 很难知道，但这可能是时区问题。尝试将您的计算机设置为 UTC，看看问题是否消失。

【讨论】：

我为你添加了数据和 timeParse。时区不应该是一个因素，因为我只解析特定日期，而不是时间