Расширение пути SVG с JavaScript

-1

В настоящее время я разрабатываю приложение JavaScript, и я делаю что-то вроде диаграммы с SVG-контуром. Поэтому мой вопрос заключается в том, как я могу расширять этот путь динамически каждую секунду новыми данными и создавать плавные анимации (в настоящее время я удаляю старый путь и создаю новый с новыми данными, но, как это, он мигает каждую секунду, и я так хочу плавная анимация происходит)Расширение пути SVG с JavaScript

Спасибо советов

С наилучшими пожеланиями, Банкиным

источник

2013-09-19 Bankin

вы можете производить код, над которым вы работаете, а затем более подробно описываете свою проблему? – MarsOne

Я не могу поместить код, потому что он слишком большой. Просто я получаю новые данные с сервера каждую секунду и на основе новых данных я должен нарисовать диаграмму. И в настоящее время я удаляю старый график и добавляю новый с новыми данными. Но разница двух диаграмм (старых и новых) - это только последние данные второго периода. Поэтому я хочу добавить эти последние извлеченные данные в существующую диаграмму (не удаляя ее, а расширяя ее). – Bankin

Вы используете какую-либо библиотеку? как raphael или highcharts? –

я установки что-то здесь:

<svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.359375px;"> 
    <path fill="none" stroke="#4572a7" d="m5,5l3,4l4,10l10,-5l3,4l4,10l10,-5l3,4l4,10l10,-5" stroke-width="2"></path> 
</svg>

просто добавив случайное число на путь так, чтобы было понятно вам :

p = document.getElementsByTagName("path"); 
setInterval(function() { 
    d = p[0].getAttribute("d"); 
    d = d.split("l").slice(1); 
    d.push(Math.random() * 10 + ',' + Math.random() * 10); 
    d = "m" + d.join("l"); 
    p[0].setAttribute("d", d); 
}, 500);

Fiddle: http://jsfiddle.net/arpitworld/de6tW/

источник

2013-09-19 08:20:53

Ваш ответ делает то, что ожидается, но вы можете заставить его двигаться плавно? – Bankin

несколько способов для этого. попробуйте следующее: http://jsfiddle.net/arpitworld/de6tW/2/ –

Большое вам спасибо, я попробую это. Мне нужно только заставить его работать с кривыми Безье, но это моя проблема :) Еще раз спасибо. – Bankin

Вы можете расширить пути SVG с помощью JavaScript. <path> элементы имеют набор методов для создания сегментов пути:

segment = path.createSVGPathSeg*

В то время как * тип сегмента вы хотите создать. Это может быть:

ArcAbs
ArcRel
CurvetoCubicAbs
CurvetoCubicRel
Many more

После того, как вы создали сегмент пути, вы можете изменить его свойства. Чтобы получить представление о том, что вы можете изменить, console.dir сегмент на консоль. Он покажет вам все свойства. Альтернативно загляните в W3C Recommendation. Вы можете добавить его в список пути сегмента:

path.pathSegList.appendItem(segment)

Если вы хотите получить доступ к п-й элемент в пути, чтобы изменить его свойства:

segment = path.pathSegList.getItem(n)

Если вы хотите путь для анимации вы можете создать эффект с интервалами.

Я создал скрипку, которая сочетает в себе все эти вещи: http://jsfiddle.net/bKDcM/

источник

2013-09-19 08:04:24 Butt4cak3

Расширение пути SVG с JavaScript

ответ

Смежные вопросы