I am trying to pan with 4 buttons(up,down,left,right) with partial success

[Kim Hovorka]

Hello,

I have added 4 buttons to the d3v5 org chart example I found @ https://github.com/bumbeishvili/d3-organization-chart

I have written the following code inside a Vuejs vue form: 

the vars svg, transateX, translateY are global scope.

zoomIn and zoomOut both work just fine. The pan buttons only work once. Not sure what I need to do to get the chart to move with each click.I can click back and forth between the buttons and the chart moves, but, only once in a given direction.

If I click the left arrow button once the chart moves, if I click again the chart does not move. So something is not being properly stored or I am not sure? Has anyone implemented panning buttons? Thank you. Kim H.

zoomIn() {

behaviors.zoom.scaleBy(svg.transition().duration(750), 1.3);

},

zoomOut() {

behaviors.zoom.scaleBy(svg.transition().duration(750), 1 / 1.3);

},

panUp() {

this.pan(svg, 'up')

},

panLeft() {

this.pan(svg, 'left')

},

panRight() {

this.pan(svg, 'right')

},

panDown() {

this.pan(svg, 'down')

},

panZoomAction(action) {

switch(action) {

case 'zoomIn':

this.zoomIn();

break;

case 'zoomOut':

this.zoomOut();

break;

case 'panUp':

this.panUp();

break;

case 'panLeft':

this.panLeft();

break;

case 'panRight':

this.panRight();

break;

case 'panDown':

this.panDown();

break;

}

},

pan(domNode, direction) {

let speed = 20;

let translateCoords = d3.zoomTransform(domNode.attr("transform", `translate(${translateX}, ${translateY})`));

if (direction == 'left' || direction == 'right') {

translateX = direction == 'left' ? translateCoords.x + speed : translateCoords.x - speed;

translateY = translateCoords.y;

} else if (direction == 'up' || direction == 'down') {

translateX = translateCoords.x;

translateY = direction == 'up' ? translateCoords.y + speed : translateCoords.y - speed;

}

domNode.attr("transform", `translate(${translateX}, ${translateY})`);

},