d3js_element_selection_and_color_transition_quickstart.ts

1import * as d3 from "d3";
2import { Selection, Transition } from "d3";
3
4// Select an element (e.g., the document body or a specific div)
5const body: Selection<HTMLBodyElement, unknown, HTMLElement, any> = d3.select("body");
6
7// Apply a transition
8body
9  .transition()
10  .duration(750)
11  .style("background-color", "red");
12
13// To demonstrate a more complex transition with types:
14const circle: Selection<SVGCircleElement, unknown, HTMLElement, any> = d3.select("circle");
15
16const t: Transition<SVGCircleElement, unknown, HTMLElement, any> = circle
17  .transition()
18  .duration(1000)
19  .delay(100);
20
21t.attr("r", 100)
22 .attr("fill", "blue");