Изменение уровня масштабирования холста D3 SVG?

У меня есть испытательный полигон, где я строю D3-ориентированный силовой сетевой граф из моих собственных данных.

Если я выберу примерно пять или шесть генов, узлы в моем графике начнут вытягиваться за пределы холста.

Какие части API d3 мне нужно вызвать для управления уровнем масштабирования, чтобы узлы не исчезали с края холста?

Если доступно, я бы определенно оценил любые фрагменты кода, которые кратко объясняют концепцию, если только реализация довольно проста. Спасибо за Ваши советы.

2 2
javascript d3.js zoom

2 ответа:

D3 позволяет использовать масштабирование, и это довольно легко реализовать. Вам нужно будет только завернуть график в элемент "g", который я буду называть"viewport". Затем вы назначите событие масштабирования элемента svg: 

svg.call(d3.behavior.zoom().on("zoom", redraw))

Следующая функция: 

function redraw() {
    d3.select("#viewport").attr("transform",
        "translate(" + d3.event.translate + ")"
        + " scale(" + d3.event.scale + ")");
}
9
var x, y, k;
            if (d && centered !== d) {
                var centroid = path.centroid(d);
                x = centroid[0];
                y = centroid[1];
                k = 4;
                centered = d;
            } else {
                x = w / 2;
                y = h / 2;
                k = 1;
                centered = null;
            }

Напишите следующий код в функции масштабирования формат SVG.attr ("transform"," translate ("+w / 2+", " + h / 2+") scale ("+ k +") translate ("+- x +", " + - y +")");

Для абсолютного масштаба вы не можете использовать этот код это будет полезно для масштабирования и панорамирования карт

1