Динамически центрирующийся фильтрованный узел в элементе SVG в D3

Я работаю над добавлением функциональности фильтра к своему графику d3. Когда пользователь ищет определенный узел на основе метки или идентификатора, я хочу повторно отобразить график и показать весь график снова, но я хочу, чтобы фильтрованный узел находился в центре элемента svg.

вот что я помог ему сосредоточиться:

 // I get the width and height of the SVG element:
   var svgWidth = parseInt(svg.style("width").replace(/px/, ""), 10);
   var svgHeight = parseInt(svg.style("height").replace(/px/, ""), 10);

 // I get the center of the svg:
    var centerX = svgWidth / 2;
    var centerY = svgHeight / 2;

     _.forEach(nodes, function(e) {
          // get the full node (with x and y coordinates) based on the id
           var nodeObject = g.node(nodeId); 

          // I look for matches between the nodeId or label and search word
           if (searchInput) {
                if (nodeObject.id === parseInt(searchInput, 10) || nodeObject.label.toUpperCase().indexOf(searchInput.toUpperCase()) > -1) {
                                    searchedNodes.push(nodeObject);
                                    console.log(searchedNodes);
                            }
                    }
              }

              // after looping through all the nodes rendered
              if (searchedNodes.length > 0) {
                    //var width = searchedNodes[0].elem.getBBox().width;
                    //var height =  searchedNodes[0].elem.getBBox().height;
                    ctrl.selectedNode = searchedNodes[0];
                    var offsetX = centerX - searchedNodes[0].x;
                    var offsetY = centerY - searchedNodes[0].y;
                    svgGroup.attr("transform", "translate(" + offsetX + "," + offsetY + ")" + "scale(" + 3 + ")");

                     // this line here is incorrect syntax and breaks the build, essentially stopping the script from running
                     // the graph renders correctly when this line is here
                    svgGroup.attr("transform", "translate(" + offsetX + "," + offsetY + ")").scale(2).event;
                 }

Это то, что выглядит граф с помощью строки выше, которая разбивает скрипт.

Когда я удалял эту строку, она не центрируется, почти похожа на лишний график. Очевидно, мне нужно будет удалить строку кода выше, которая неверна, но кто-нибудь не знает, почему граф не отображает правильно в этом случае?:

          // get the user input and re-render the graph
            elem.find(".search").bind("keyup", function (e:any) {
                var searchInput;
                if (e["keyCode"] === 13) {
                    searchedNodes = [];
                    searchInput = scope["searchInput"];
                    currentFilteredNode = null;
                    enterKeyPressed = true;
                    renderGraph(searchInput);
                    }

                if (e["keyCode"] === 8) {
                    searchedNodes = [];
                    searchInput = scope["searchInput"];
                    currentFilteredNode = null;
                    renderGraph(searchInput);
                }
            });

// if there is searchInput and at least one matching node sort the nodes
// by id and then select and center the first matching one
if (searchInput && searchedNodes.length > 0) {
       searchedNodes.sort(function (node1:any, node2:any) {
                            return node1.id - node2.id;
                    });

                    // make sure the noResultsMessage does not get shown on the screen if there are matching results
                    scope.$apply(function() {
                        scope["noResultsMessage"] = false;
                    });

                    ctrl.selectedNode = searchedNodes[0];
                    offsetX = centerX - searchedNodes[0].x;
                    offsetY = centerY - searchedNodes[0].y;
                    svgGroup.attr("transform", "translate(" + offsetX  + "," + offsetY + ")" + "scale(" + 3 + ")");
}

                 // the only other zoom and this runs just on page load
                 zoom = d3.behavior.zoom();

                 zoom.on("zoom", function() {
                    svgGroup.attr("transform", "translate(" + (<any>d3.event).translate + ")" + "scale(" + (<any>d3.event).scale + ")");

           // this scales the graph - it runs on page load and whenever the user enters a search input, which re-renders the whole graph
           var scaleGraph = function(useAnimation:any) {
                var graphWidth = g.graph().width + 4;
                var graphHeight = g.graph().height + 4;
                var width = parseInt(svg.style("width").replace(/px/, ""), 10);
                var height = parseInt(svg.style("height").replace(/px/, ""), 10);
                var zoomScale = originalZoomScale;
                // Zoom and scale to fit        
                if (ctrl.autoResizeGraph === "disabled") {
                    zoomScale = 1;
                } else {
                    // always scale to canvas if set to fill or if auto (when larger than canvas)   
                    if (ctrl.autoResizeGraph === "fill" || (graphWidth > width || graphHeight > height)) {
                        zoomScale = Math.min(width / graphWidth, height / graphHeight);
                    }
                }

                var translate;

                if (direction.toUpperCase() === "TB") {
                    // Center horizontal + align top (offset 1px)
                    translate = [(width / 2) - ((graphWidth * zoomScale) / 2) + 2, 1];
                } else if (direction.toUpperCase() === "BT") {
                    // Center horizontal + align top (offset 1px)
                    translate = [(width / 2) - ((graphWidth * zoomScale) / 4) + 2, 1];
                } else if (direction.toUpperCase() === "LR") {
                    // Center vertical (offset 1px)
                    translate = [1, (height / 2) - ((graphHeight * zoomScale) / 2)];
                } else if (direction.toUpperCase() ===  "RL") {
                    // Center vertical (offset 1px)
                    translate = [1, (height / 2) - ((graphHeight * zoomScale) / 4)];
                } else {
                    // Center horizontal and vertical
                    translate = [(width / 2) - ((graphWidth * zoomScale) / 2), (height / 2) - ((graphHeight * zoomScale) / 2)];
                }

                zoom.center([width / 2, height / 2]);
                zoom.size([width, height]);

                zoom.translate(translate);
                zoom.scale(zoomScale);

                // If rendering the first time, then don't use animation
                zoom.event(useAnimation ? svg.transition().duration(500) : svg);
            };

КОД ДЛЯ ФИЛЬТРАЦИИ УЗЛОВ:

  // move to the left of the searchedNodes array when the left arrow is clicked
            scope["filterNodesLeft"] = function () {
                filterNodesIndex--;
                if (filterNodesIndex < 0) {
                    filterNodesIndex = searchedNodes.length - 1;
                }
                currentFilteredNode = searchedNodes[filterNodesIndex];
                runScaleGraph = true;
                number = 1;
                renderGraph();
            };

            // move to the right of the searchNodes array when the right arrow is clicked
            scope["filterNodesRight"] = function () {
                filterNodesIndex++;
                if (filterNodesIndex > searchedNodes.length - 1) {
                    filterNodesIndex = 0;
                }
                currentFilteredNode = searchedNodes[filterNodesIndex];
                runScaleGraph = true;
                number = 1;
                renderGraph();
            };

  // get the current filteredNode in the searchNodes array and center it
  // when the graph is re-rendered
  if (currentFilteredNode) {
                    ctrl.selectedNode = currentFilteredNode;
                    offsetX = centerX - currentFilteredNode.x;
                    offsetY = centerY - currentFilteredNode.y;
                    svgGroup.attr("transform", "translate(" + offsetX + "," + offsetY + ")");
                    runScaleGraph = false;
                }