2015-06-23 2 views
1

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

zoom = d3.behavior.zoom() 
     .scaleExtent([.05, 10]) 
     .on("zoom", zoomed); 
svg = d3.select("#graph") 
     .append("svg") 
     .attr("height", height) 
     .attr("width", width) 
     .call(zoom); 
.... 
function zoomed(sel) { 
    zoomBase(d3.event.translate , d3.event.scale); 
} 
function zoomBase(translate, scale){ 
    zoom.scale(scale); 
    zoom.translate(translate); 
    container.attr("transform", "translate(" + translate + ")scale(" + scale + ")"); 
} 
function recenter(node){ 
    var node = findNodeByName(node); 
    if(zoom.scale() < 0.5){ 
     zoom.scale(0.5); 
    } 
    zoom.translate([node.x, node.y]); // Math seems to be wrong here 
    container.attr("transform", "translate(" + translate + ")scale(" + zoom.scale() + ")"); 
} 

Проблемы заключается в том, что, когда я над узлом в вопросе и искать его мое местоположение показывает, как [-2246.3690822841745, -846.6411913027562], но когда я получаю й и y от фактического узла я получаю [4346.868560310511, 1950.790521658118], учитывая, что я над вершиной узла, есть ли какая-то математика или что-то, что мне нужно здесь?

+1

См https://stackoverflow.com/questions/20860660/recentering-d3- force-layout-diagram-on-node-click и https://stackoverflow.com/questions/25225069/zooming-to-a-clicked-node-on-a-d3-force-directed-graph –

+0

У меня есть догадка что есть трансформация в основной группе (которая содержит все узлы), таким образом, когда вы берете узел .x и node.y для перевода его в центр, вы не рассматривали перевести его родительскую группу g. Но, как я сказал, это просто догадка, может подтвердить и предложить решение, если вы поместите код на скрипку. – Cyril

+0

Я не уверен, добавил немного больше. Я заметил, что функция масштабирования зарегистрирована в элементе SVG вместо контейнера, но я предполагаю, что это нормально. – Jackie

ответ

1

Ларс был прав это ответ ...

zoom.translate([width/2 - zoom.scale() * node.x, height/2 - zoom.scale() * node.y]) 

Чтобы разорвать этот Безразлично немного

width/2 (go to middle) 
- 
zoom.scale() * node.x (move middle to the scaled x)