constructor(svgElement: ElementRef, diameter: number, padding: number) {
   this.svgElement = svgElement;
   this.padding = padding;
   this.size = diameter + 2 * this.padding;
   this.outerRadius = diameter / 2;
   let innerRadius = this.outerRadius - this.outerRadius * 0.15;
   this.arcGenerator = this.getArcGenerator(innerRadius, this.outerRadius);
   transition(); //needed for import statement;
 }

exitTransition = exitTransition
    .duration(200)
    .style('fill', 'red')
    .transition() // sequenced transition on exiting circles.
    .duration(1000)
    .attr('r', 0)
    .remove();
// --------------------------------------------------------------------------
// Tests of Top-Level Transition Functions
// --------------------------------------------------------------------------

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

let topTransition: d3Transition.Transition<HTMLElement, any, null, undefined>;
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<HTMLElement, string, null, undefined>;
topTransition2 = d3Transition.transition<string>('top');
topTransition2 = d3Transition.transition<string>(enterTransition);

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

let updateTransitionActive: d3Transition.Transition<SVGCircleElement, CircleDatum, SVGSVGElement, SVGDatum> | null;