многолинейный график составлен с разной скоростью и местами d3 - PullRequest
Новая
       80

многолинейный график составлен с разной скоростью и местами d3

1 голос
/ 11 апреля 2020

Я анимирую многострочный график в d3 v5. Это; сравнивая показатель мобильности округа во Флориде с медианным расстоянием, пройденным для всего штата. Я успешно создал анимацию, и процесс фильтрации работает как надо. Проблема, которая у меня есть сейчас, заключается в том, что для большинства округов линия рисуется в другом месте вдоль оси x. Линия Флориды анимирована, как и должно быть все время. Анимация начинается одновременно для обоих. Что меня озадачивает, так это то, что для определенных вариантов линии следуют ожидаемому поведению (было нарисовано в начале моей оси X) Есть ли причина, по которой это происходит?

Uneven animation for multi line chart

Фильтровать данные: 

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 секунды.

Любая помощь в этом будет чрезвычайно полезна! Заранее спасибо:)

...