TypeScript Selection.call方法代码示例

 restorePosition(): void {
   this.wrapText();
   this.svg
       .call(this.zoom.transform, d3_zoomIdentity.translate(
         this.config.left + this.config.width / 2,
         this.config.top
       ))
 }

  constructor(graphId:string, div: any, config: any={}) {
    this.i = 0;

    let defaultConfig: TrialConfig = {
      customSize: function(g:TrialGraph) {
        return [
          g.config.width,
          g.config.height,
        ]
      },
      customMouseOver: (g:TrialGraph, d: VisibleTrialNode, name: string) => false,
      customMouseOut: (g:TrialGraph, d: VisibleTrialNode) => false,
      customForm: (g: TrialGraph, form: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => null,

      duration: 750,

      top: 50,
      right: 30,
      bottom: 80,
      left: 30,

      width: 900,
      height: 500,

      useTooltip: false,
      fontSize: 10,
      labelFontSize: 10,

      nodeSizeX: 47,
      nodeSizeY: 100,
    };
    this.config = (Object as any).assign({}, defaultConfig, config);


    this.graphId = graphId;

    this.zoom = d3_zoom()
      .on("zoom", () => this.zoomFunction())
      .on("start", () => d3_select('body').style("cursor", "move"))
      .on("end", () => d3_select('body').style("cursor", "auto"))
      .wheelDelta(() => {
        return -d3_event.deltaY * (d3_event.deltaMode ? 120 : 1) / 2000;
      })

    this.div = d3_select(div)
    let form = d3_select(div)
      .append("form")
      .classed("trial-toolbar", true);

    this.svg = d3_select(div)
      .append("div")
      .append("svg")
      .attr("width", this.config.width)
      .attr("height", this.config.height)
      .call(this.zoom);

    this.createMarker('end', 'enormal', 'black');
    this.createMarker('endbefore', 'ebefore', 'red');
    this.createMarker('endafter', 'eafter', 'green');

    this.g = this.svg.append("g")
      .attr("id", this._graphId())
      .attr("transform", "translate(0,0)")
      .classed('TrialGraph', true);

    this.tree = d3_tree()
      .nodeSize([
        this.config.nodeSizeX,
        this.config.nodeSizeY
      ]);

    // **Toolbar**
    this.createToolbar(form);

    // Tooltip
    this.tooltipDiv = d3_select("body").append("div")
      .attr("class", "now-tooltip now-trial-tooltip")
      .style("opacity", 0)
      .on("mouseout", () => {
        this.closeTooltip();
      });

    // Zoom
    this.svg
      .call(this.zoom.transform, d3_zoomIdentity.translate(
        this.config.left + this.config.width / 2,
        this.config.top
      ))
  }

    .on('drag', dragged)
    .on('end', dragended);

// remove event listeners for a drag event type
circleDrag.on('start.tmp', null);

let handler: ((this: SVGCircleElement, d: CircleDatum, i: number, group: SVGCircleElement[] | NodeListOf<SVGCircleElement>) => void) | undefined = circleDrag.on('start');
// fails, wrong dragged DOM event
// let wrongHandler1: ((this:SVGRectElement, d:CircleDatum, i: number, group: SVGRectElement[] | NodeListOf<SVGRectElement>)=> void) | undefined = circleDrag.on('start');
// fails, handler with wrong datum type
// let wrongHandler2: ((this:SVGCircleElement, d:{test: number}, i: number, group: SVGCircleElement[] | NodeListOf<SVGCircleElement>)=> void) | undefined = circleDrag.on('start');
// -----------------------------------------------------------------------------
// Test Attach Drag Behavior
// -----------------------------------------------------------------------------

circles.call(circleDrag);

const wrongSelection: Selection<HTMLDivElement, any, any, any> = select<HTMLDivElement, any>('div');

// wrongSelection.call(circleDrag); // fails, as dragged elements are not of type specified for drag behavior

// -----------------------------------------------------------------------------
// Test Drag Event Interface
// -----------------------------------------------------------------------------

let e: d3Drag.D3DragEvent<SVGCircleElement, CircleDatum, CircleDatum | d3Drag.SubjectPosition> = event;

circleDrag = e.target; // target return drag behavior

const type: string = e.type;
const subject: CircleDatum | d3Drag.SubjectPosition = e.subject;

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

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>('svg');
const svgTransition = svgSelection.transition();

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

const pathSelection: Selection<SVGPathElement, any, any, any> = select<SVGPathElement, any>('path');
const pathTransition = svgSelection.transition();

// // $ExpectError
// pathSelection.call(bottomAxis);
// // $ExpectError
// pathSelection.call(bottomAxis);