多个柱状图平移，柱状图展示错位，代码如下

import F2 from '@antv/f2';

function formatNumber(n) {
return String(Math.floor(n * 100) / 100).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

const data = [{
name: 'London',
date: '2020-01-01',
steps: 18.9
}, {
name: 'London',
date: '2020-01-02',
steps: 28.8
}, {
name: 'London',
date: '2020-01-03',
steps: 39.3
}, {
name: 'London',
date: '2020-01-04',
steps: 81.4
}, {
name: 'London',
date: '2020-01-05',
steps: 47
}, {
name: 'London',
date: '2020-01-06',
steps: 20.3
}, {
name: 'London',
date: '2020-01-07',
steps: 24
}, {
name: 'London',
date: '2020-01-08',
steps: 35.6
}, {
name: 'Berlin',
date: '2020-01-01',
steps: 12.4
}, {
name: 'Berlin',
date: '2020-01-02',
steps: 23.2
}, {
name: 'Berlin',
date: '2020-01-03',
steps: 34.5
}, {
name: 'Berlin',
date: '2020-01-04',
steps: 99.7
}, {
name: 'Berlin',
date: '2020-01-05',
steps: 52.6
}, {
name: 'Berlin',
date: '2020-01-06',
steps: 35.5
}, {
name: 'Berlin',
date: '2020-01-07',
steps: 37.4
}, {
name: 'Berlin',
date: '2020-01-08',
steps: 42.4
},
{
name: 'Lon',
date: '2020-01-01',
steps: 18.9
},{
name: 'Lon',
date: '2020-01-02',
steps: 28.8
}, {
name: 'Lon',
date: '2020-01-03',
steps: 39.3
}, {
name: 'Lon',
date: '2020-01-04',
steps: 81.4
}, {
name: 'Lon',
date: '2020-01-05',
steps: 47
}, {
name: 'Lon',
date: '2020-01-06',
steps: 20.3
}, {
name: 'Lon',
date: '2020-01-07',
steps: 24
}, {
name: 'Lon',
date: '2020-01-08',
steps: 35.6
},];
const originDates = [];
const originSteps = [];
const firstDayArr = [];
data.forEach(function(obj) {
if (obj.date >= '2020-01-04') {
originDates.push(obj.date);
originSteps.push(obj.steps);
}

if (obj.first) {
firstDayArr.push(obj);
}
});

const chart = new F2.Chart({
id: 'container',
pixelRatio: window.devicePixelRatio
});

chart.source(data, {
date: {
type: 'timeCat',
tickCount: 5,
values: originDates,
mask: 'MM/DD'
},
steps: {
tickCount: 5
}
});

chart.axis('date', {
tickLine: {
length: 4,
stroke: '#cacaca'
},
label: {
fill: '#cacaca'
},
line: {
top: true
}
});
chart.axis('steps', {
position: 'right',
label: function label(text) {
return {
text: formatNumber(text * 1),
fill: '#cacaca'
};
},

grid: {
stroke: '#d1d1d1'
}
});
chart.tooltip({
showItemMarker: false,
background: {
radius: 2,
padding: [ 3, 5 ]
},
onShow: function onShow(ev) {
const items = ev.items;
items[0].name = '';
items[0].value = items[0].value + ' 步';
}
});
chart.interval().position('date*steps').style({
radius: [ 2, 2, 0, 0 ]
})
.color('name')
.size(10)
.adjust({
type: 'dodge',
marginRatio: 2 // 设置分组间柱子的间距
});

firstDayArr.forEach(function(obj) {
chart.guide().line({
top: false,
start: [ obj.date, 'min' ],
end: [ obj.date, 'max' ],
style: {
lineWidth: 1,
stroke: '#A4A4A4'
}
});
chart.guide().text({
position: [ obj.date, 'max' ],
content: obj.date,
style: {
textAlign: 'start',
fill: '#cacaca',
textBaseline: 'top'
},
offsetX: 5,
offsetY: 5
});
});
// 定义进度条
chart.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
}
});
chart.interaction('pan');
chart.render();

Reproduce the supplied F2 chart with grouped intervals, the x scrollBar, and pan interaction. Start by inspecting how dodge positioning is recalculated during horizontal panning; done means the grouped bars remain correctly aligned with their dates while scrolling.

Written by the indexing model from the issue text.