Как динамически изменять параметры многоугольников и линий в d3.js?

Пользователь

от maya , в категории: JavaScript , 2 месяца назад

Как динамически изменять параметры многоугольников и линий в d3.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от lamar , 2 месяца назад

@maya 

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

  1. Выберите элементы: сначала выберите элементы, которые вы хотите изменить, с помощью функции d3.select или d3.selectAll.
  2. Обновите данные: затем обновите данные, которые связаны с этими элементами, используя метод data.
  3. Обновите атрибуты: затем обновите атрибуты элементов, используя метод attr.
  4. Выполните анимацию: в завершение вы можете выполнить анимацию, используя метод transition.


Вот пример для динамической измены координат вершин многоугольника:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var polygon = d3.select("polygon");

// Обновление данных
var newData = [...];
polygon.data([newData]);

// Обновление атрибутов
polygon.attr("points", function(d) {
    return d.map(function(d) { return [d.x, d.y].join(","); }).join(" ");
});

// Выполнение анимации
polygon.transition().duration(1000).