Use d3-transition as a separate npm module - d3.js

Question

I'm trying to
import { transition } from 'd3-transition'
and add an update transition to this code, but I can't figure it out how to use the transition library separately.
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));
I realize I can just import the whole d3 library, but I'm doing it this way intentionally.

Answer 1

There are two questions here:
how to import transition with ES6?
how to add an update transition?
To import d3-transition, your import is correct:
import { transition } from 'd3-transition'
To add an update transition, you can use selection.join(). selection.join() takes a function per selection: one for the enter, update and exit selection.
To track update changes, note that you need to provide a key function to D3, otherwise it won't be able to tell what changed. A key function will identify uniquely each of your data.
Finally, use selection.call() to avoid breaking the method chain.
You can see the full example at the link.
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)
)
);
Example on CodeSandbox. Make sure to refresh the browser to see the transition.