Использовать d3-переход как отдельный модуль npm

Question

Я пытаюсь

import { transition } from 'd3-transition'

и добавить переход обновления к этому коду, но я не могу понять, как использовать библиотеку переходов отдельно.

import { select } from "d3-selection";

 //...

 const binding = select(host.svg)
    .select("#points")
    .selectAll("circle.point")
    .data(data);

  const enter = binding.enter();

  enter
    .append("circle")
    .attr("class", "point")
    .attr("cx", (d) => projection(d)[0])
    .attr("cy", (d) => projection(d)[1])
    .attr("r", (d) => radius(d.count));

Я понимаю, что могу просто импортировать всю библиотеку d3, но я делаю это намеренно.

Answer 1

Здесь два вопроса:

• как импортировать переход с ES6?
• как добавить переход обновления?

Импорт d3 -transition, ваш импорт правильный:

import { transition } from 'd3-transition'

Чтобы добавить переход обновления, вы можете использовать selection.join () . selection.join () принимает функцию для каждого выбора: по одной для выбора входа, обновления и выхода.

Чтобы отслеживать изменения обновления, обратите внимание, что вам необходимо предоставить ключевую функцию для D3, иначе он не сможет сказать, что изменилось. Ключевая функция будет уникальным образом идентифицировать каждый из ваших данных.

Наконец, используйте selection.call (), чтобы избежать разрыва цепочки методов.

Вы можете увидеть полный пример по ссылке.

  svg
    .selectAll("rect")
    // Key function to track updates
    .data(data, d => d)
    // https://observablehq.com/@d3/selection-join
    .join(
      // Enter selection handler
      enter =>
        enter
          .append("rect")
          .attr("width", 100)
          .attr("height", d => d.value)
          .attr("x", (d, i) => 150 * i) // spacing
          .attr("fill", "red"),
      // Update selection handler
      update =>
        update.attr("fill", "green").call(update =>
          update
            .transition()
            .duration(3000)
            .attr("height", d => d.value)
        )
    );

Пример на CodeSandbox . Обязательно обновите sh браузер, чтобы увидеть переход.