TypeScript d3.zoom函数代码示例

  constructor(svg, element, pedalboardView : PedalboardView) {
    //const width = svg.node().getBoundingClientRect().width;
    //const height = svg.node().getBoundingClientRect().height;
    const size = pedalboardView.size;

    const width = size.width;
    const height = size.height;

    const limit = 500;


    // Combine the two changes to
    const translatey = 20;
    //const scale = width / svg.node().getBoundingClientRect().width;
    const scale = svg.node().getBoundingClientRect().width / width;
    // - start view scaled
    element.attr("transform", `translate(0, ${translatey})scale(${scale})`);
    const transform = d3.zoomTransform(element)
                        .translate(0, translatey)
                        .scale(scale);
    // - start drawing scaled
    svg.call(d3.zoom().transform, transform);

    svg.call(
      d3.zoom()
        .scaleExtent([1/3 < scale ? 1/3 : scale, 2])
        .translateExtent([[-limit, -limit], [width+limit, height+limit]])
        .on("zoom", () => this.zoomed(element))
        .on("start", () => d3.select('body').style("cursor", "move"))
        .on("end", () => d3.select('body').style("cursor", "auto"))
      );
  }

  /** A method to bind a pan and zoom behaviour to an svg element */
  applyZoomableBehaviour(svgElement, containerElement) {
    let svg, container, zoomed, zoom;

    svg = d3.select(svgElement);
    container = d3.select(containerElement);

    zoomed = () => {
      const transform = d3.event.transform;
      container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
    }

    zoom = d3.zoom().on('zoom', zoomed);
    svg.call(zoom);
  }

  private generateTreeDiagram(data: any) {
    const margin = {top: 20, right: 40, bottom: 50, left: 75};


    const viewerWidth = $(this.vizCanvas.nativeElement).width() - margin.left - margin.right;
    const viewerHeight = $(this.vizCanvas.nativeElement).height() - margin.top - margin.bottom;




    const svg = d3.select(this.vizCanvas.nativeElement).append('svg')
      .attr('width', viewerWidth + margin.left + margin.right)
      .attr('height', viewerHeight + margin.top + margin.bottom);

    svg.append('rect')
      .attr('width', viewerWidth)
      .attr('height', viewerHeight)
      .style('fill', 'none')
      .style('pointer-events', 'all')
      .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on('zoom', zoomed));

    const g = svg
      .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    let i = 0,
      duration = 750,
      root;



    const that = this;

    function zoomed() {
      const transform = d3.event.transform;
      g.attr('transform', function() {
        return transform.translate(margin.left, margin.top).toString();
      });

    }



// declares a tree layout and assigns the size
    const treemap = d3.tree().size([viewerHeight, viewerWidth]);

// Assigns parent, children, height, depth
    root = d3.hierarchy(data, function(d) { return d.children; });
    root.x0 = viewerHeight / 2;
    root.y0 = 0;

// Collapse after the second level
   // root.children.forEach(collapse);

    update(root);

// Collapse the node and all it's children
    function collapse(d) {
      if (d.children) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null
      }
    }

    function update(source) {

      // Assigns the x and y position for the nodes
      const treeData = treemap(root);

      // Compute the new tree layout.
      const nodes = treeData.descendants(),
        links = treeData.descendants().slice(1);

      // Normalize for fixed-depth.
      nodes.forEach(function(d){ d.y = d.depth * 180});

      // ****************** Nodes section ***************************

      // Update the nodes...
      const node = g.selectAll('g.node')
        .data(nodes, function(d: any) {return d.id || (d.id = ++i); });

      // Enter any new modes at the parent's previous position.
      const nodeEnter = node.enter().append('g')
        .attr('class', 'node')
        .attr('transform', function(d) {
          return 'translate(' + source.y0 + ',' + source.x0 + ')';
        })
        .on('click', click);

      // Add Circle for the nodes
      nodeEnter.append('circle')
        .attr('class', 'node')
        .attr('r', 1e-6)
        .style('fill', function(d: any) {
          return d._children ? 'lightsteelblue' : '#fff';
        });
//.........这里部分代码省略.........

//.........这里部分代码省略.........
      mouseDownNode: null,
      justDragged: false,
      justScaleTransGraph: false,
      showTypes: false,
      hideDead: false
    };

    this.selectionHandler = {
      clear: function () {
        view.state.selection.clear();
        broker.broadcastClear(this);
        view.updateGraphVisibility();
      },
      select: function (nodes: Array<GNode>, selected: boolean) {
        const locations = [];
        for (const node of nodes) {
          if (node.nodeLabel.sourcePosition) {
            locations.push(node.nodeLabel.sourcePosition);
          }
          if (node.nodeLabel.origin && node.nodeLabel.origin.bytecodePosition) {
            locations.push({ bytecodePosition: node.nodeLabel.origin.bytecodePosition });
          }
        }
        view.state.selection.select(nodes, selected);
        broker.broadcastSourcePositionSelect(this, locations, selected);
        view.updateGraphVisibility();
      },
      brokeredNodeSelect: function (locations, selected: boolean) {
        if (!view.graph) return;
        const selection = view.graph.nodes(n => {
          return locations.has(nodeToStringKey(n))
            && (!view.state.hideDead || n.isLive());
        });
        view.state.selection.select(selection, selected);
        // Update edge visibility based on selection.
        for (const n of view.graph.nodes()) {
          if (view.state.selection.isSelected(n)) {
            n.visible = true;
            n.inputs.forEach(e => {
              e.visible = e.visible || view.state.selection.isSelected(e.source);
            });
            n.outputs.forEach(e => {
              e.visible = e.visible || view.state.selection.isSelected(e.target);
            });
          }
        }
        view.updateGraphVisibility();
      },
      brokeredClear: function () {
        view.state.selection.clear();
        view.updateGraphVisibility();
      }
    };

    view.state.selection = new MySelection(nodeToStringKey);

    const defs = svg.append('svg:defs');
    defs.append('svg:marker')
      .attr('id', 'end-arrow')
      .attr('viewBox', '0 -4 8 8')
      .attr('refX', 2)
      .attr('markerWidth', 2.5)
      .attr('markerHeight', 2.5)
      .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', 'M0,-4L8,0L0,4');

    this.graphElement = svg.append("g");
    view.visibleEdges = this.graphElement.append("g");
    view.visibleNodes = this.graphElement.append("g");

    view.drag = d3.drag<any, GNode, GNode>()
      .on("drag", function (d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        view.updateGraphVisibility();
      });

    function zoomed() {
      if (d3.event.shiftKey) return false;
      view.graphElement.attr("transform", d3.event.transform);
      return true;
    }

    const zoomSvg = d3.zoom<SVGElement, any>()
      .scaleExtent([0.2, 40])
      .on("zoom", zoomed)
      .on("start", function () {
        if (d3.event.shiftKey) return;
        d3.select('body').style("cursor", "move");
      })
      .on("end", function () {
        d3.select('body').style("cursor", "auto");
      });

    svg.call(zoomSvg).on("dblclick.zoom", null);

    view.panZoom = zoomSvg;

  }

(async function(){
  const Repo = mix(MemoryRepo)
  .with(object)
  .with(walkers)
  .with(fetchMixin, fetch);

  const repo = new Repo();
  const url = new URL(document.location.href).searchParams.get('repo');
  const match = url && /^\https:\/\/(.*)$/.exec(url);
  if(!match){
    document.location.search = '?repo=https://github.com/es-git/test-pull';
    return;
  }

  (document.querySelector('#repo') as any).value = 'https://'+match[1];

  await repo.fetch(`/proxy/${match[1]}.git`);

  const refs = new Map(await repo.listRefs().then(refs => Promise.all(refs.map(async ref => [await repo.getRef(ref), ref] as [string, string]))));

  const nodes = new Map<string, Node>();
  const edges = [];
  let y = 0;
  const hashes = [await repo.getRef('refs/remotes/origin/master') as string];
  for await(const {hash, commit} of repo.walkCommits(...hashes)){
    nodes.set(hash, {
      index: hash,
      label: commit.message,
      children: [],
      parents: [],
      x: hashes.indexOf(hash),
      y
    });
    y++;
    hashes.splice(hashes.indexOf(hash), 1, ...commit.parents);
    for(const parent of commit.parents){
      edges.push({source: hash, target: parent});
    }
  }

  const dagNodes = [...nodes.values()];

  const dagLinks = edges.map(e => ({
    source: nodes.get(e.source) as Node,
    target: nodes.get(e.target) as Node
  }));

  dagLinks.forEach(function(link) {
    var sourceNode = link.source
    var targetNode = link.target;
    sourceNode.children.push(targetNode);
    targetNode.parents.push(sourceNode);
  });

  const svg = d3.select('svg');

  const group = svg
    .append("g");

  svg.append("rect")
    .attr("width", 960)
    .attr("height", 700)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(d3.zoom()
      .scaleExtent([1 / 8, 4])
      .on("zoom", zoom(group)));

  var svgDagEdges = group.selectAll('.daglink')
    .data(dagLinks)
    .enter().append('path')
      .attr('class', 'daglink')
      .attr('d', d => {
        const x1 = d.source.x * 50 + 50;
        const y1 = d.source.y * 50 + 50;
        const x2 = d.target.x * 50 + 50;
        const y2 = d.target.y * 50 + 50;
        return `M ${x1} ${y1} C ${x1} ${y1+25}, ${x2} ${y1+25}, ${x2} ${y1+50} L ${x2} ${y2}`;
      });

  var svgDagNodes = group.selectAll('.dagnode')
    .data(dagNodes)
    .enter().append('g')
      .attr('transform', d => `translate(${d.x*50 + 50},${d.y*50 + 50})`);
  svgDagNodes.append('circle')
    .attr('class', 'dagnode')
    .attr('r', 5);
  svgDagNodes.append('text')
    .attr('transform', 'translate(6,0)')
    .text(d => d.label);

})().then(_ => console.log('success!'), e => console.error(e));

//.........这里部分代码省略.........
      },
      select: function (nodes, selected) {
        let locations = [];
        for (const node of nodes) {
          if (node.sourcePosition) {
            locations.push(node.sourcePosition);
          }
          if (node.origin && node.origin.bytecodePosition) {
            locations.push({ bytecodePosition: node.origin.bytecodePosition });
          }
        }
        graph.state.selection.select(nodes, selected);
        broker.broadcastSourcePositionSelect(this, locations, selected);
        graph.updateGraphVisibility();
      },
      brokeredNodeSelect: function (locations, selected) {
        let selection = graph.nodes
          .filter(function (n) {
            return locations.has(nodeToStringKey(n))
              && (!graph.state.hideDead || n.isLive());
          });
        graph.state.selection.select(selection, selected);
        // Update edge visibility based on selection.
        graph.nodes.forEach((n) => {
          if (graph.state.selection.isSelected(n)) n.visible = true;
        });
        graph.edges.forEach(function (e) {
          e.visible = e.visible ||
            (graph.state.selection.isSelected(e.source) && graph.state.selection.isSelected(e.target));
        });
        graph.updateGraphVisibility();
      },
      brokeredClear: function () {
        graph.state.selection.clear();
        graph.updateGraphVisibility();
      }
    };
    broker.addNodeHandler(this.selectionHandler);

    graph.state.selection = new MySelection(nodeToStringKey);

    const defs = svg.append('svg:defs');
    defs.append('svg:marker')
      .attr('id', 'end-arrow')
      .attr('viewBox', '0 -4 8 8')
      .attr('refX', 2)
      .attr('markerWidth', 2.5)
      .attr('markerHeight', 2.5)
      .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', 'M0,-4L8,0L0,4');

    this.graphElement = svg.append("g");
    graph.visibleEdges = this.graphElement.append("g");
    graph.visibleNodes = this.graphElement.append("g");

    graph.drag = d3.drag<any, GNode, GNode>()
      .on("drag", function (d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        graph.updateGraphVisibility();
      });


    d3.select("#layout").on("click", partial(this.layoutAction, graph));
    d3.select("#show-all").on("click", partial(this.showAllAction, graph));
    d3.select("#toggle-hide-dead").on("click", partial(this.toggleHideDead, graph));
    d3.select("#hide-unselected").on("click", partial(this.hideUnselectedAction, graph));
    d3.select("#hide-selected").on("click", partial(this.hideSelectedAction, graph));
    d3.select("#zoom-selection").on("click", partial(this.zoomSelectionAction, graph));
    d3.select("#toggle-types").on("click", partial(this.toggleTypesAction, graph));

    // listen for key events
    d3.select(window).on("keydown", function (e) {
      graph.svgKeyDown.call(graph);
    }).on("keyup", function () {
      graph.svgKeyUp.call(graph);
    });

    function zoomed() {
      if (d3.event.shiftKey) return false;
      graph.graphElement.attr("transform", d3.event.transform);
    }

    const zoomSvg = d3.zoom<SVGElement, any>()
      .scaleExtent([0.2, 40])
      .on("zoom", zoomed)
      .on("start", function () {
        if (d3.event.shiftKey) return;
        d3.select('body').style("cursor", "move");
      })
      .on("end", function () {
        d3.select('body').style("cursor", "auto");
      });

    svg.call(zoomSvg).on("dblclick.zoom", null);

    graph.panZoom = zoomSvg;

  }