Анимации Stroke-dashoffset и dasharray не работают

Я пытаюсь анимировать линию пути в D3. Я могу заставить работать другие переходы, такие как эффект затухания, но после исследования того, как переходить пути, кажется, что лучший вариант - поиграть с штрихом dasharray, изменив его

var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Test Drive for data ",
      "time": "2018-04-03T01:48:51Z",
      "coordTimes": []
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [10, 10, 10],
        [30, 40, 10],
        [50, 20, 10],
        [70, 100, 10],
        [90, 20, 10],
        [110, 120, 10],
        [130, 100, 10],
        [150, 80, 10]
      ]
    }
  }]
}

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var lineFunction = d3.line()
  .x(function(d) {
    return d[0]
  })
  .y(function(d) {
    return d[1]
  })
  .curve(d3.curveBasis);

var totalLength = d3.line(data).length;

var tripLine = svg.append("path")
  .datum(data.features[0].geometry.coordinates)
  .attr("id", "pathLine")
  .style("stroke-dasharray", 0)
  .attr("d", lineFunction)
  .style("stroke", "#ddd")
  .transition()
  .duration(2000)
  .style("stroke", "red")
  .style("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-width", 4)
  .attr("fill", "none");

<script src = "https://d3js.org/d3.v5.min.js"></script>

Проблема в том, что D3 чрезвычайно затруднил использование предыдущих примеров из-за обновлений синтаксиса, которые делают невозможным получение общей длины пути.

«Проблема в том, что D3 чрезвычайно затруднил использование предыдущих примеров из-за обновлений синтаксиса, которые делают невозможным получение общей длины пути». Нет, ничего не изменилось, так как это мало общего с D3.

— 18.04.2018 10:45

javascript d3.js svg

18.04.2018 09:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

428

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь есть основная ошибка: d3.line(data).length, который, кстати, совпадает с d3.line().length, вернет 1.

Вам нужен метод getTotalLength, который должен вызываться в Элемент SVG, а не в выборе D3 и тем более в генераторе линий.

Следовательно:

var totalLength = tripLine.node().getTotalLength();

Вот обновленный код:

var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Test Drive for data ",
      "time": "2018-04-03T01:48:51Z",
      "coordTimes": []
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [10, 10, 10],
        [30, 40, 10],
        [50, 20, 10],
        [70, 100, 10],
        [90, 20, 10],
        [110, 120, 10],
        [130, 100, 10],
        [150, 80, 10]
      ]
    }
  }]
}

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 1000);

var lineFunction = d3.line()
  .x(function(d) {
    return d[0]
  })
  .y(function(d) {
    return d[1]
  })
  .curve(d3.curveBasis);

var tripLine = svg.append("path")
  .datum(data.features[0].geometry.coordinates)
  .attr("id", "pathLine")
  .style("stroke-dasharray", 0)
  .attr("d", lineFunction)
  .style("stroke", "#ddd")
  .attr("fill", "none");

var totalLength = tripLine.node().getTotalLength();

tripLine.transition()
  .duration(2000)
  .style("stroke", "red")
  .style("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-width", 4);

<script src = "https://d3js.org/d3.v5.min.js"></script>

18.04.2018 10:43

Другие вопросы по теме

Кто-нибудь знает о программе чтения файлов .csv Javascript, которая создаст ассоциативный массив?

«TypeError: neighbors [o.source.index] is undefined» при замене данных примера в визуализации данных D3

Расширение холста до полного окна браузера

Как установить временную шкалу d3Plus только с определенными годами?

Ошибки при обновлении до d3js версии 5

Как динамически обновлять фокусы в multi-foci force-layout в d3.js

Метки для кругов, которые не отображаются в визуализации данных d3

Правильно разместите метки на осях в D3.js

ReactJs и D3.js: Uncaught (в обещании) SyntaxError: Неожиданный токен <в JSON в позиции 0 в responseJson

Изменить стиль функций в d3

Анимации Stroke-dashoffset и dasharray не работают

Ответы 1

Другие вопросы по теме

Похожие вопросы