How to use d3-transition - 10 common examples

// --------------------------------------------------------------------------

// transition(...) ----------------------------------------------------------

let topTransition: d3Transition.Transition;
topTransition = d3Transition.transition('top');

// test creation from existing transition

topTransition = d3Transition.transition(enterTransition);

// tests with pre-existing datum (typed as string)
// set datum with a type of string
select('html').datum('test');
let topTransition2: d3Transition.Transition;
topTransition2 = d3Transition.transition('top');
topTransition2 = d3Transition.transition(enterTransition);

// active(...) ----------------------------------------------------------

let updateTransitionActive: d3Transition.Transition | null;

updateTransitionActive = d3Transition.active(circles.nodes()[0], 'update');

// interrupt(...) ----------------------------------------------------------

d3Transition.interrupt(topTransition.selection().node());
d3Transition.interrupt(topTransition.selection().node(), 'top');

// set datum with a type of string
select('html').datum('test');
let topTransition2: d3Transition.Transition;
topTransition2 = d3Transition.transition('top');
topTransition2 = d3Transition.transition(enterTransition);

// active(...) ----------------------------------------------------------

let updateTransitionActive: d3Transition.Transition | null;

updateTransitionActive = d3Transition.active(circles.nodes()[0], 'update');

// interrupt(...) ----------------------------------------------------------

d3Transition.interrupt(topTransition.selection().node());
d3Transition.interrupt(topTransition.selection().node(), 'top');

// tests with pre-existing datum (typed as string)
// set datum with a type of string
select('html').datum('test');
let topTransition2: d3Transition.Transition;
topTransition2 = d3Transition.transition('top');
topTransition2 = d3Transition.transition(enterTransition);

// active(...) ----------------------------------------------------------

let updateTransitionActive: d3Transition.Transition | null;

updateTransitionActive = d3Transition.active(circles.nodes()[0], 'update');

// interrupt(...) ----------------------------------------------------------

d3Transition.interrupt(topTransition.selection().node());
d3Transition.interrupt(topTransition.selection().node(), 'top');

// test creation from existing transition

topTransition = d3Transition.transition(enterTransition);

// tests with pre-existing datum (typed as string)
// set datum with a type of string
select('html').datum('test');
let topTransition2: d3Transition.Transition;
topTransition2 = d3Transition.transition('top');
topTransition2 = d3Transition.transition(enterTransition);

// active(...) ----------------------------------------------------------

let updateTransitionActive: d3Transition.Transition | null;

updateTransitionActive = d3Transition.active(circles.nodes()[0], 'update');

// interrupt(...) ----------------------------------------------------------

d3Transition.interrupt(topTransition.selection().node());
d3Transition.interrupt(topTransition.selection().node(), 'top');

// test creation from existing transition

topTransition = d3Transition.transition(enterTransition);

// tests with pre-existing datum (typed as string)
// set datum with a type of string
select('html').datum('test');
let topTransition2: d3Transition.Transition;
topTransition2 = d3Transition.transition('top');
topTransition2 = d3Transition.transition(enterTransition);

// active(...) ----------------------------------------------------------

let updateTransitionActive: d3Transition.Transition | null;

updateTransitionActive = d3Transition.active(circles.nodes()[0], 'update');

// interrupt(...) ----------------------------------------------------------

d3Transition.interrupt(topTransition.selection().node());
d3Transition.interrupt(topTransition.selection().node(), 'top');

// emit the selection
        this.selectedChange.emit(segment.data);

        // store the selected segment
        this._selected = segment;

        // update the focusable segment
        this._focusableSegment = segment;

        // set our new ranges
        this._x.domain([this.getSegmentX(segment), this.getSegmentX(segment) + this.getSegmentWidth(segment)]);
        this._y.domain([segment.y0, 1]).range([this.getTotalCollapsedHeight(), 100]);

        // create the transition
        const segmentTransition = transition().duration(500);

        // update the segment sizes - outside angular zone as there is lots of `requestAnimationFrames` triggering lots of change detection
        this._ngZone.runOutsideAngular(() => {
            this._segmentsSelection.transition(segmentTransition)
                .style('left', data => this.getNormalizedSegmentX(data) + '%')
                .style('top', data => this.getNormalizedSegmentY(data) + '%')
                .style('width', data => (this.getNormalizedSegmentWidth(data) + 0.01) + '%')
                .style('height', data => this.getNormalizedSegmentHeight(data) + '%')
                .style('padding-right', data => this.getSegmentPaddingRight(data) + '%')
                .style('padding-left', data => this.getSegmentPaddingLeft(data) + '%');
        });
    }

const redrawList = $$.getRedrawList(shape, flow, flowFn, isTransition);

		// callback function after redraw ends
		const afterRedraw = flow || config.onrendered ? () => {
			flowFn && flowFn();
			callFn(config.onrendered, $$, $$.api);
		} : null;

		if (afterRedraw) {
			// Only use transition when current tab is visible.
			if (isTransition) {
				// Wait for end of transitions for callback
				const waitForDraw = $$.generateWait();

				// transition should be derived from one transition
				d3Transition().duration(duration)
					.each(() => {
						redrawList
							.reduce((acc, t1) => acc.concat(t1), [])
							.forEach(t => waitForDraw.add(t));
					})
					.call(waitForDraw, afterRedraw);
			} else {
				afterRedraw();
			}
		}

		// update fadein condition
		$$.mapToIds($$.data.targets).forEach(id => {
			$$.withoutFadeIn[id] = true;
		});
	}

render(): void {

        // perform the layout algorithm on the current dataset
        this.updateLayout();

        // select all the existing links and nodes
        this.updateSelections();

        // create a d3 transition based in the specified transition time
        const defaultTransition = transition()
            .duration(this.duration)
            .on('start', () => this._isTransitioning = true)
            .on('end', () => {
                this._isTransitioning = false;
                this.transitionEnd.emit();
            });

        // render the links when they are first added to the DOM
        this._links.enter()
            .insert('path')
            .attr('class', 'ux-organization-chart-link')
            .attr('d', link => this.getLinkPath(link))
            .attr('opacity', -2)
            .transition(defaultTransition)
            .attr('d', link => this.getLinkPath(link))
            .attr('opacity', 1);

const slice = state.canvas.selectAll('.slice')
      .data(
        state.layoutData
          .filter(d => // Show only slices with a large enough angle and within the max levels
            d.x1 >= focusD.x0
            && d.x0 <= focusD.x1
            && (d.x1-d.x0)/(focusD.x1-focusD.x0) > state.minSliceAngle/360
            && (!state.maxLevels || d.depth - (focusD.depth || (state.excludeRoot ? 1 : 0)) < state.maxLevels)
            && (d.y0 >=0 || focusD.parent) // hide negative layers on top level
          ),
        d => d.id
      );

    const nameOf = accessorFn(state.label);
    const colorOf = accessorFn(state.color);
    const transition = d3Transition().duration(TRANSITION_DURATION);

    const levelYDelta = state.layoutData[0].y1 - state.layoutData[0].y0;
    const maxY = Math.min(1, focusD.y0 + levelYDelta * Math.min(
      focusD.hasOwnProperty('height') ? focusD.height + 1 : Infinity,
      state.maxLevels || Infinity
    ));

    // Apply zoom
    state.svg.transition(transition)
      .tween('scale', () => {
        const xd = d3Interpolate(state.angleScale.domain(), [focusD.x0, focusD.x1]);
        const yd = d3Interpolate(state.radiusScale.domain(), [focusD.y0, maxY]);
        return t => {
          state.angleScale.domain(xd(t));
          state.radiusScale.domain(yd(t));
        };

bridge: {
        w: 2
    },
    nodeName: {
        dy: 1
    },
    nodeDescription: {
        dy: 16
    }
};

// initial angle, set to make label overlaps less likely
const ANGLE_OFFSET = -0.7;
const ANIMATION_DURATION = 300;

const TRANSITION = transition()
    .ease(easeLinear)
    .duration(ANIMATION_DURATION);

const styles = {
    centerNodes: "wrmv-center-nodes",
    centerNode: "wrmv-center-node",
    nodeName: "wrmv-name",
    nodeDetail: "wrmv-detail",
    outerNodes: "wrmv-outer-nodes",
    outerNode: "wrmv-outer-node",
    bridges: "wrmv-bridges",
    bridge: "wrmv-bridge",
    hasRelationships: "has-relationships",
    noRelationships: "no-relationships",
    selected: "wrmv-selected"
};