分组柱状图adjust="dodge"，滚动条滚动条，数据滚动，而柱状图却是固定的

`
/** @jsx jsx */
import { jsx, Canvas, Chart, Interval, ScrollBar, Axis } from '@antv/f2';

const data = [
{
name: 'London',
月份: 'Jan.',
月均降雨量: 18.9,
},
{
name: 'London',
月份: 'Feb.',
月均降雨量: 28.8,
},
{
name: 'London',
月份: 'Mar.',
月均降雨量: 39.3,
},
{
name: 'London',
月份: 'Apr.',
月均降雨量: 81.4,
},
{
name: 'London',
月份: 'May.',
月均降雨量: 47,
},
{
name: 'London',
月份: 'Jun.',
月均降雨量: 20.3,
},
{
name: 'London',
月份: 'Jul.',
月均降雨量: 24,
},
{
name: 'London',
月份: 'Aug.',
月均降雨量: 35.6,
},
{
name: 'Berlin',
月份: 'Jan.',
月均降雨量: 12.4,
},
{
name: 'Berlin',
月份: 'Feb.',
月均降雨量: 23.2,
},
{
name: 'Berlin',
月份: 'Mar.',
月均降雨量: 34.5,
},
{
name: 'Berlin',
月份: 'Apr.',
月均降雨量: 99.7,
},
{
name: 'Berlin',
月份: 'May.',
月均降雨量: 52.6,
},
{
name: 'Berlin',
月份: 'Jun.',
月均降雨量: 35.5,
},
{
name: 'Berlin',
月份: 'Jul.',
月均降雨量: 37.4,
},
{
name: 'Berlin',
月份: 'Aug.',
月均降雨量: 42.4,
},
];
const context = document.getElementById('container').getContext('2d');
const { props } = (








);

const chart = new Canvas(props);
chart.render();
`

Reproduce the issue with the provided Canvas, Chart, Interval, Axis, and ScrollBar example, focusing on grouped bars using adjust="dodge" and an x-axis range. Read how ScrollBar updates the chart and how Interval renders grouped data; done means scrolling the range moves the grouped bars with the data instead of leaving them fixed.

Written by the indexing model from the issue text.