d3渲染错误的坐标（带偏移量）

Question

我尝试在x轴上创建带日期的图形但是使用一些偏移量来渲染点

偏移取决于X轴上的刻度线

        this.mappedData = window._.map(this.data, (item, key) => {
            return {
                date: new Date(key),
                ...item
            };
        });
        var minDate = window._.min(dates);
        var maxDate = window._.max(dates);

        this.xScale = d3.scaleTime()
            .domain([minDate, maxDate])
            .range([0, this.width]);

        var yRange = window._.transform(this.mappedData, function(result, n) {
            result.push(n.dau);
            result.push(n.nau);
        }, []);

        var minRange = window._.min(yRange);
        var maxRange = window._.max(yRange);
        this.yScale = d3.scaleLinear()
            .domain([minRange, maxRange])
            .range([this.height, 0]);
        var oneDay = 24 * 60 * 60 * 1000;

        var diffDays = Math.round(Math.abs((minDate.getTime() - maxDate.getTime()) / (oneDay)));
        this.axisX = d3.axisBottom(this.xScale)
            .ticks(diffDays)
            .tickFormat(this.formatDate);

        this.axisY = d3.axisLeft(this.yScale);


    this.svg.append("path")
        .attr("class", "dau")
        .attr("d", this.lineNau(this.mappedData));

Issue Demo

任何人都知道为什么会这样吗？

Answer 1

1. 添加parseDate：

   this.parseDate = d3.timeParse('%Y-%m-%d');

2. 准备数据：

   this.mappedData = window._.map(this.data, (item, key) => { return { date: self.parseDate(self.formatDate(new Date(key))), ...item }; });

3. 调用好函数：

   this.xScale = d3.scaleTime() .domain([minDate, maxDate]).nice(d3.timeDay) // or without arguments .range([0, this.width]);

在：

在：

demo