Как плавно нарисовать путь от начальной точки до конечной точки в D3.js
18471 просмотра
1 ответ
У меня есть следующий код, который строит путь линии на основе функции синуса:
var data = d3.range(40).map(function(i) {
return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4};
});
var margin = {top: 10, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var line = d3.svg.line()
.interpolate('linear')
.x(function(d){ return x(d.x) })
.y(function(d){ return y(d.y) });
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.selectAll('.point')
.data(data)
.enter().append("svg:circle")
.attr("cx", function(d, i){ return x(d.x)})
.attr("cy", function(d, i){ return y(d.y)})
.attr('r', 4);
То, что я хочу сделать, это построить его плавно от первого узла до последнего узла. Я также хочу иметь плавный переход между двумя последовательными узлами, а не просто помещать всю строку сразу. Просто как соединение точек с помощью карандаша.
Любая помощь могла бы быть полезна.
Автор: Nasir Источник Размещён: 12.11.2019 09:22Ответы (1)
38 плюса
Решение
Вы можете легко анимировать пути с помощью stroke-dashoffset
иand path.getTotalLength()
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", 0);
Автор: methodofaction
Размещён: 15.12.2012 03:01
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- svg Как проверить, загружен ли внедренный документ SVG на html-страницу?
- svg Как получить эффект контура на текст в SVG?
- svg Создание SVG-графики с использованием Javascript?
- svg Существуют ли зрелые библиотеки векторного рисования для Python? (это работает на Windows)
- svg SVG получить ширину текстового элемента
- svg Как преобразовать изображение PNG в SVG?
- d3.js D3 принудительно визуализирует макет очень медленно при использовании большого набора данных?
- d3.js Доступ к свойствам массива объектов
- d3.js Преобразование созданного JavaScript SVG в файл
- d3.js D3 Выбор элемента внутри SVG
- d3.js Каков наилучший способ сделать макет визуализации d3.js отзывчивым?
- d3.js Исправить положение узла в D3 Force Directed Layout