Javascript 以不同的速率和位置绘制多折线图d3

我正在D3V5中制作一个多折线图的动画。信息技术将佛罗里达州一个县的流动率与整个州的平均旅行距离进行比较。我已经成功地生成了动画，过滤过程正在正常工作。我现在遇到的问题是，对于大多数县来说，这条线是沿着x轴在不同的地方画的。佛罗里达线一直处于动画状态。这两个对象的动画同时开始。让我困惑的是，对于某些选项，线条遵循预期的行为（在x轴的开始处绘制）。这有什么原因吗

筛选数据：

function compare(county) {
// 3.1 - filter data based on select value
let countyData = data.filter(function(element) {
  return element.place === 'Florida' || element.place === county;
});

嵌套：

 countyData = d3
  .nest()
  .key(function(d) {
    return d.place;
  })
  .entries(countyData);

单击“播放”按钮后绘制线：

const countyLine = bounds
    .selectAll('lines')
    .data(countyData)
    .enter()
    .append('path')
    .attr('fill', 'none')
    .attr('class', 'chartLine')
    .attr('stroke', function(d) {
      if (d.key === 'Florida') {
        return '#00796b';
      }
      return '#fbc02d';
    })
    .attr('stroke-width', function(d) {
      if (d.key === 'Florida') {
        return '1';
      }
      return '2';
    })
    .attr('d', function(d) {
      return d3
        .line()
        .x(function(d) {
          return xScale(d.date);
        })
        .y(function(d) {
          return yScale(d.percent_change);
        })(d.values);
    });

  const totalLength = countyLine.node().getTotalLength();

  // Set Properties of Dash Array and Dash Offset and initiate Transition
  countyLine
    .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
    .attr('stroke-dashoffset', totalLength)
    .transition()
    .delay(2000)
    .duration(7000)
    .ease(d3.easeLinear)
    .attr('stroke-dashoffset', 0);

首先，我更新我的y轴并将线条动画延迟2秒

在此方面的任何帮助都将不胜感激！提前感谢：）