Pans the diagram with a specified delta (represented as a Point).

If called without parameters, the method returns the current pan offset of the diagram.

Parameters

pan Object|kendo.dataviz.diagram.Point

The translation delta to apply to the diagram or the Point to pan to.

Object — The current pan offset in the format: { x: Number, y: Number }

Example - pan to a predefined point in the Diagram

<button id="panBtn">Pan Diagram</button>
<div id="diagram"></div>
<script>
  $("#panBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    var point = new kendo.dataviz.diagram.Point(120, 120);
    diagram.pan(point);
  });
  $("#diagram").kendoDiagram({
    zoom: 1.5,
    shapes: [{
      id: "1",
      x: 100,
      y: 20
    }, {
      id: "2",
      x: 350,
      y: 20
    }, {
      id: "3",
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

Example – Pan the Diagram Relative to the Current Position

var diagram = $("#diagram").data("kendoDiagram");

// Move diagram 50px to the right var currentOffset = diagram.pan();

diagram.pan({ x: currentOffset.x + 50, y: currentOffset.y });

The pan() method sets an absolute offset. To move the Diagram relatively (for example, when handling keyboard navigation), first retrieve the current offset by calling pan() without arguments, then apply the desired delta and set the new offset.