Animation Properties

/**
 * Animates attribute changes with automatic interpolation
 * @param name - Attribute name to animate
 * @param value - Target value (constant, function, or null to remove)
 * @returns The transition instance for chaining
 */
transition.attr(name: string, value: any): Transition;

// Numeric interpolation
transition.attr("r", 20);
transition.attr("width", (d) => d.value * 10);

// Color interpolation
transition.attr("fill", "red");
transition.attr("stroke", d3.rgb(255, 0, 0));

// Transform interpolation (special handling)
transition.attr("transform", "translate(100, 50) scale(2)");

// String with embedded numbers
transition.attr("d", "M0,0L100,100");

// Function-based values
transition.attr("cx", function(d, i) {
  return i * 50;
});

// Remove attribute (set to null)
transition.attr("fill", null);

/**
 * Sets custom attribute interpolation using an interpolator factory
 * @param name - Attribute name to animate
 * @param factory - Function that returns an interpolator, or null to remove tween
 * @returns The transition instance for chaining, or current interpolator if no factory provided
 */
transition.attrTween(name: string, factory?: InterpolatorFactory): Transition;

// Custom interpolator from current value to blue
transition.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});

// Custom rainbow interpolator
transition.attrTween("fill", function() {
  return function(t) {
    return "hsl(" + t * 360 + ",100%,50%)";
  };
});

// Data interpolation for complex paths
transition.attrTween("d", function(d) {
  const interpolate = d3.interpolateObject(this._current, d);
  this._current = interpolate(1);
  return function(t) {
    return line(interpolate(t));
  };
});

// Get current interpolator
const currentTween = transition.attrTween("fill");

// Remove tween
transition.attrTween("fill", null);

/**
 * Animates style property changes with automatic interpolation
 * @param name - CSS property name to animate
 * @param value - Target value (constant, function, or null to remove)
 * @param priority - Optional CSS priority ("important")
 * @returns The transition instance for chaining
 */
transition.style(name: string, value: any, priority?: string): Transition;

// Basic style animation
transition.style("opacity", 0.5);
transition.style("background-color", "red");

// With priority
transition.style("display", "block", "important");

// Function-based values
transition.style("left", function(d, i) {
  return (i * 100) + "px";
});

// Color interpolation
transition.style("color", d3.hsl(120, 0.5, 0.5));

// Remove style (set to null)
transition.style("display", null);

// Transform styles (special handling)
transition.style("transform", "translateX(100px) rotate(45deg)");

/**
 * Sets custom style interpolation using an interpolator factory
 * @param name - CSS property name to animate
 * @param factory - Function that returns an interpolator, or null to remove tween
 * @param priority - Optional CSS priority ("important")
 * @returns The transition instance for chaining, or current interpolator if no factory provided
 */
transition.styleTween(name: string, factory?: InterpolatorFactory, priority?: string): Transition;

// Custom color interpolation from current to blue
transition.styleTween("background-color", function() {
  return d3.interpolateRgb(d3.style(this, "background-color"), "blue");
});

// Custom numeric interpolation
transition.styleTween("left", function() {
  const start = parseFloat(d3.style(this, "left"));
  return d3.interpolateNumber(start, 200);
});

// Rainbow color effect
transition.styleTween("color", function() {
  return function(t) {
    return "hsl(" + t * 360 + ",100%,50%)";
  };
});

// Data-driven interpolation
transition.styleTween("width", function(d) {
  const current = parseFloat(d3.style(this, "width"));
  return d3.interpolateNumber(current, d.targetWidth);
});

/**
 * Sets text content when the transition starts
 * @param value - Text value (constant or function)
 * @returns The transition instance for chaining
 */
transition.text(value: any): Transition;

// Set constant text
transition.text("Loading...");

// Function-based text
transition.text(function(d, i) {
  return "Item " + (i + 1) + ": " + d.name;
});

// Clear text
transition.text(null);

// Data-driven text
transition.text(d => d.label);

/**
 * Sets custom text interpolation using an interpolator factory
 * @param factory - Function that returns an interpolator, or null to remove tween
 * @returns The transition instance for chaining, or current interpolator if no factory provided
 */
transition.textTween(factory?: InterpolatorFactory): Transition;

// Animate number text from 0 to 100
transition.textTween(function() {
  return d3.interpolateRound(0, 100);
});

// Animate from current text number to data value
transition.textTween(function(d) {
  const current = +this.textContent || 0;
  return d3.interpolateRound(current, d.value);
});

// Custom text animation
transition.textTween(function() {
  const words = ["Loading", "Loading.", "Loading..", "Loading..."];
  return function(t) {
    return words[Math.floor(t * words.length)];
  };
});

// Animate percentage
transition.textTween(function(d) {
  const current = parseFloat(this.textContent) || 0;
  return function(t) {
    return d3.format(".1%")(d3.interpolateNumber(current / 100, d.percent / 100)(t));
  };
});

/**
 * Sets custom tween animation
 * @param name - Unique name for the tween
 * @param value - Tween function that returns an interpolator, or null to remove
 * @returns The transition instance for chaining, or current tween if no value provided
 */
transition.tween(name: string, value?: TweenFunction): Transition;

// Custom attribute animation (equivalent to attr)
transition.tween("attr.fill", function() {
  const interpolate = d3.interpolateRgb(this.getAttribute("fill"), "blue");
  return function(t) {
    this.setAttribute("fill", interpolate(t));
  };
});

// Animate scroll position
transition.tween("scroll", function() {
  const startScroll = this.scrollTop;
  const endScroll = 500;
  const interpolate = d3.interpolateNumber(startScroll, endScroll);
  return function(t) {
    this.scrollTop = interpolate(t);
  };
});

// Multi-property animation
transition.tween("multi", function(d) {
  const startX = +this.getAttribute("cx");
  const startY = +this.getAttribute("cy");
  const interpolateX = d3.interpolateNumber(startX, d.targetX);
  const interpolateY = d3.interpolateNumber(startY, d.targetY);
  
  return function(t) {
    this.setAttribute("cx", interpolateX(t));
    this.setAttribute("cy", interpolateY(t));
  };
});

// Get current tween
const currentTween = transition.tween("scroll");

// Remove tween
transition.tween("scroll", null);

/**
 * Removes elements when the transition ends
 * @returns The transition instance for chaining
 */
transition.remove(): Transition;

// Fade out and remove
transition
  .style("opacity", 0)
  .remove();

// Slide up and remove
transition
  .style("height", "0px")
  .style("margin", "0px")
  .remove();

// Multiple properties before removal
transition
  .duration(500)
  .style("opacity", 0)
  .style("transform", "scale(0)")
  .remove();