时间戳

首页 > 解决方案 > 使用 d3-transition 作为单独的 npm 模块

d3.js - 使用 d3-transition 作为单独的 npm 模块

问题描述

我试图

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 库，但我是故意这样做的。

标签： d3.js

解决方案

这里有两个问题：

  • 如何使用 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 上的示例。确保刷新浏览器以查看转换。

推荐阅读