Question

我一直在研究x轴，它将根据其他地方设置的区间变量格式化轴上的刻度。这是一个字符串（'十年'，'lustrum'，'年'，天'等）。我有它的工作，它通常做的工作。下面是一个日期范围的例子，在17/8/19198到2017年8月24日之间，有一个月亮（五年）间隔。有一个辅助（次要）轴没有刻度标签，也根据间隔/我也添加了一些格式到我们的家庭风格。实施例

我遇到的问题是我想在主轴的开头添加一个额外的刻度，以便它匹配房屋风格，因为我们总是标记初始日期。我已经使用了.nice（），但是这也添加了一个勾号到最后，它也默认为轴上的下一个舍入增量，所以如果图表在2009年开始并且我有一个十年的间隔，则.nice会强制图表回到2000年，这是不好的

我想要实现的是这个他的：

我认为它就像访问轴刻度数组并将domain（）[0]值未移位到零位置一样简单。但这似乎不起作用。当我将它们与测试变量对齐时，我实际上似乎并没有访问滴答。我得到的是每两年一次的日期量表。

任何指针都将不胜感激，谢谢

这是我的代码：

function xaxisDate() {
    let mindate = new Date(1970, 1, 1);
    let maxdate = new Date(2017, 6, 1);
    let scale = d3.scaleTime()
        .domain([mindate, maxdate])
        .range([0, 220]);
    let frameName;
    let interval = 'lustrum';
    let minorAxis = true;
    let tickSize = 10;
    let minorTickSize = 5;
    let fullYear = false;
    let align = 'bottom';
    let xLabel;
    let xLabelMinor;

    function axis(parent) {
        //scale.nice(getTicks(interval))
        function getAxis(alignment) {
            return {
                top: d3.axisTop(),
                bottom: d3.axisBottom(),
            }[alignment];
        }

        const xAxis = getAxis(align)
            .tickSize(tickSize)
            .ticks(getTicks(interval))
            .tickFormat(tickFormat(interval))
            .scale(scale)

        test = scale.ticks()
        console.log('before',test);

        // console.log('domain',scale.domain()[0])
        // scale.ticks().unshift(scale.domain()[0]);
        // console.log('after',scale.ticks())
        // xAxis.tickValues()

        const xMinor = d3.axisBottom()
            .tickSize(minorTickSize)
            .ticks(getTicksMinor(interval))
            .tickFormat('')
            .scale(scale);

        xLabel = parent.append('g')
            .attr('class', 'axis xAxis axis baseline')
            .call(xAxis);

        if (minorAxis) {
            xLabelMinor = parent.append('g')
                .attr('class', (d) => {
                    const plotHeight = d3.select('.chart-plot').node().getBBox().height;
                    if (plotHeight === tickSize) {
                        return 'axis xAxis';
                    }
                    return 'axis xAxis axis baseline';
                })
                .call(xMinor);
        }

        if (frameName) {
            xLabel.selectAll('.axis.xAxis text')
            .attr('id', frameName + 'xLabel');
            xLabel.selectAll('.axis.xAxis line')
            .attr('id', frameName + 'xTick');
            if (minorAxis) {
                xLabelMinor.selectAll('.axis.xAxis line')
                .attr('id', frameName + 'xTick');
            }
        }

        xLabel.selectAll('.domain').remove();
    }

    function getTicks(interval) {
        console.log('interval',interval)
        return {
            'century' : d3.timeYear.every(100),
            'jubilee': d3.timeYear.every(50),
            'decade': d3.timeYear.every(10),
            'lustrum': d3.timeYear.every(5),
            'years': d3.timeYear.every(1),
            'quarters': d3.timeMonth.every(3),
            'months': d3.timeMonth.every(1),
            'weeks': d3.timeWeek.every(1),
            'days': d3.timeDay.every(1),
            'hours': d3.timeHour.every(1)
        }[interval];
    }
    function getTicksMinor(interval) {
        const test = d3.timeYear.every(1);
        console.log('test', test)
        return {
            'century': d3.timeYear.every(10),
            'jubilee': d3.timeYear.every(10),
            'decade': d3.timeYear.every(1),
            'lustrum': d3.timeYear.every(1),
            'years': d3.timeMonth.every(1),
            'quarters': d3.timeMonth.every(1),
            'months': d3.timeDay.every(1),
            'weeks': d3.timeDay.every(1),
            'days': d3.timeHour.every(1),
            'hours': d3.timeMinute.every(1)
        }[interval];
    }

    function tickFormat(interval) {
        let formatFullYear = d3.timeFormat('%Y'),
        formatYear = d3.timeFormat('%y'),
        formatMonth = d3.timeFormat('%b'),
        formatWeek = d3.timeFormat('%W'),
        formatDay = d3.timeFormat('%d'),
        formatHour = d3.timeFormat('%H:%M');
        return {
            'century': d3.timeFormat('%Y'),
            'jubilee': function(d, i) {
                const format = checkCentury(d, i);
                return format;
            },
            'decade': function(d, i) {
                const format = checkCentury(d, i);
                return format;
            },
            'lustrum':function(d, i) {
                const format = checkCentury(d, i);
                return format;
            },
            'years': function(d, i) {
                const format = checkCentury(d, i);
                return format;
            },
            'quarters':function(d, i) {
                const format = getQuarters(d, i);
                return format;
            },
            'months': function(d, i) {
                const format = checkMonth(d, i);
                return format;
            },
            'weeks':function(d, i) {
                const format = getWeek(d, i);
                return format;
            },
            'days':function(d, i) {
                const format = getDays(d, i);
                return format;
            },
            'hours': function(d, i) {
                const format = getHours(d, i);
                return format;
            },
        }[interval];

        function getHours(d, i) {
            if (d.getHours() === 1 || i === 0) {
                return formatHour(d) + ' ' + formatDay(d);
            }
            return formatHour(d);
        }

        function getDays(d, i) {
            if (d.getDate() === 1 || i === 0) {
                return formatDay(d) + ' ' + formatMonth(d);
            }
            return formatDay(d);
        }

        function getWeek(d, i) {
            if (d.getDate() < 9) {
                return formatWeek(d) + ' ' + formatMonth(d);
            }
            return formatWeek(d);
        }

        function getQuarters(d, i) {
            if (d.getMonth() < 3 && i < 4) {
                return 'Q1 ' + formatFullYear(d);
            }
            if (d.getMonth() < 3) {
                return 'Q1';
            }
            if (d.getMonth() >= 3 && d.getMonth() < 6) {
                return 'Q2';
            }
            if (d.getMonth() >= 6 && d.getMonth() < 9) {
                return 'Q3';
            }
            if (d.getMonth() >= 9 && d.getMonth() < 12) {
                return 'Q4';
            }
        }

        function checkMonth(d, i) {
            if (d.getMonth() === 0 || i === 0) {
                const newYear = d3.timeFormat('%b %Y');
                return newYear(d);
            }
            return formatMonth(d);
        }

        function checkCentury(d, i) {
            if (fullYear || (+formatFullYear(d) % 100 === 0) || (i === 0)) {
                return formatFullYear(d);
            }
            return formatYear(d);
        }
    }
    axis.align = (d) => {
        align = d;
        return axis;
    };
    axis.frameName = (d) => {
        if (d === undefined) return frameName;
        frameName = d;
        return axis;
    };
    axis.scale = (d) => {
        scale = d;
        return axis;
    };
    axis.domain = (d) => {
        scale.domain(d);
        return axis;
    };
    axis.range = (d) => {
        scale.range(d);
        return axis;
    };

    axis.fullYear = (d) => {
        if (d === undefined) return fullYear;
        fullYear = d;
        return axis;
    };
    axis.interval = (d) => {
        interval = d;
        return axis;
    };
    axis.tickSize = (d) => {
        if (!d) return tickSize;
        tickSize = d;
        return axis;
    };
    axis.minorTickSize = (d) => {
        if (!d) return minorTickSize;
        minorTickSize = d;
        return axis;
    };
    axis.minorAxis = (d) => {
        if (d === undefined) return minorAxis;
        minorAxis = d;
        return axis;
    };
    axis.xLabel = (d) => {
        if (d === undefined) return xLabel;
        xLabel = d;
        return axis;
    };
    axis.xLabelMinor = (d) => {
        if (d === undefined) return xLabelMinor;
        xLabelMinor = d;
        return axis;
    };
    return axis;

Answer 1

答案在于tickValues。然后你需要返回tick数组的值，因为我认为unshifet域[0]值。设置xAxis后，需要插入以下内容：

 let newTicks = scale.ticks(getTicks(interval))
        newTicks.unshift(scale.domain()[0]);
        xAxis.tickValues(newTicks)

添加d3时间轴开头的额外刻度

1 个答案: