TypeScript Selection.transition方法代码示例

 private showTooltip(d: TrialNodeData, trial_id: number) {
   this.tooltipDiv.classed("hidden", false);
   this.tooltipDiv.transition()
     .duration(200)
     .style("opacity", 0.9);
   this.tooltipDiv.html(d.tooltip[trial_id])
     .style("left", (d3_event.pageX - 3) + "px")
     .style("top", (d3_event.pageY - 28) + "px");
 }

    .attr('r', function (d) { return d.r; })
    .style('stroke', function (d) { return d.color; })
    .style('fill', function (d) { return d.color; });


let exitCircles = circles.exit<CircleDatum>(); // Note: need to re-type datum type, as the exit selection elements have the 'old data'

// --------------------------------------------------------------------------
// Create Transition from Selection
// --------------------------------------------------------------------------

let updateTransition: d3Transition.Transition<SVGCircleElement, CircleDatum, SVGSVGElement, SVGDatum>;
let enterTransition: d3Transition.Transition<SVGCircleElement, CircleDatum, SVGSVGElement, SVGDatum>;
let exitTransition: d3Transition.Transition<SVGCircleElement, CircleDatum, SVGSVGElement, SVGDatum>;

updateTransition = circles.transition('update');
enterTransition = enterCircles.transition('enter');
exitTransition = exitCircles.transition('exit');

// Test creation from existing transition

let newEnterTransition: d3Transition.Transition<SVGCircleElement, CircleDatum, SVGSVGElement, SVGDatum>;
newEnterTransition = enterCircles.transition(enterTransition);

let differentElementTypeTransition: d3Transition.Transition<SVGSVGElement, CircleDatum, HTMLBodyElement, any>;
let differentDatumTypeTransition: d3Transition.Transition<SVGCircleElement, { differrent: string }, SVGSVGElement, any>;

// Comparable use cases arise e.g. when using an existing transition to generate a new transition
// on a different selection to synchronize them (see e.g. Mike Bostock's Brush & Zoom II Example https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6)
differentElementTypeTransition = select<HTMLBodyElement, any>('body').selectAll<SVGSVGElement, CircleDatum>('svg').transition();
newEnterTransition = enterCircles.transition(differentElementTypeTransition);

 private closeTooltip(): void {
   this.tooltipDiv.transition()
     .duration(500)
     .style("opacity", 0);
   this.tooltipDiv.classed("hidden", true);
 }

// tickSizeOuter(...) ----------------------------------------------------------------

rightAxis = rightAxis.tickSizeOuter(4);
num = rightAxis.tickSizeOuter();

// tickPadding(...) ----------------------------------------------------------------

rightAxis = rightAxis.tickPadding(5);
num = rightAxis.tickPadding();

// --------------------------------------------------------------------------
// Test Apply Axis
// --------------------------------------------------------------------------

const gSelection: Selection<SVGGElement, any, any, any> = select<SVGGElement, any>('g');
const gTransition = gSelection.transition();

gSelection.call(topAxis);
gTransition.call(topAxis);

const svgSelection: Selection<SVGSVGElement, any, any, any> = select<SVGSVGElement, any>('g');
const svgTransition = svgSelection.transition();

svgSelection.call(leftAxis);
svgTransition.call(leftAxis);

const canvasSelection: Selection<HTMLCanvasElement, any, any, any> = select<HTMLCanvasElement, any>('canvas');
const canvasTransition = canvasSelection.transition();

// canvasSelection.call(rightAxis); // fails, incompatible context container element
// canvasTransition.call(rightAxis); // fails, incompatible context container element

// Canvas Example -----------------------------------------------------------

// attach the zoom behavior to the canvas element
canvas.call(canvasZoom);

// SVG Example --------------------------------------------------------------

// attach the zoom behavior to an overlay svg rectangle
const svgOverlay: Selection<SVGRectElement, SVGDatum, HTMLElement, any> = svg.append('rect')
    .attr('width', d => d.width)
    .attr('height', d => d.height)
    .style('fill', 'none')
    .style('pointer-events', 'all')
    .call(svgZoom);

const svgOverlayTransition = svgOverlay.transition();

// --------------------------------------------------------------------------
// Test Use ZoomBehavior
// --------------------------------------------------------------------------

// transform() -------------------------------------------------------------------------------------

// use on selection
svgZoom.transform(svgOverlay, d3Zoom.zoomIdentity);
// svgZoom.transform(groupsSelection, d3Zoom.zoomIdentity); // fails, as groupSelection mismatches DOM Element type and datum type

svgZoom.transform(svgOverlay, function(datum, index, groups) {
    const that: SVGRectElement = this;
    const d: SVGDatum = datum;
    const i: number = index;

// tickSizeOuter(...) ----------------------------------------------------------------

rightAxis = rightAxis.tickSizeOuter(4);
num = rightAxis.tickSizeOuter();

// tickPadding(...) ----------------------------------------------------------------

rightAxis = rightAxis.tickPadding(5);
num = rightAxis.tickPadding();

// --------------------------------------------------------------------------
// Test Apply Axis
// --------------------------------------------------------------------------

let gSelection: Selection<SVGGElement, any, any, any>;
let gTransition = gSelection.transition();

gSelection.call(topAxis);
gTransition.call(topAxis);

let svgSelection: Selection<SVGSVGElement, any, any, any>;
let svgTransition = svgSelection.transition();

svgSelection.call(leftAxis);
svgTransition.call(leftAxis);

let canvasSelection: Selection<HTMLCanvasElement, any, any, any>;
let canvasTransition = canvasSelection.transition();

// canvasSelection.call(rightAxis); // fails, incompatible context container element
// canvasTransition.call(rightAxis); // fails, incompatible context container element