Автоматическое масштабирование объекта в принудительном макете D3

У меня есть граф, ориентированный на силу, и я реализовал автозаполнение, чтобы выделить узел. По сути, когда вы выбираете узел, он окрашивается в красный цвет. Теперь я хотел бы «увеличить масштаб» этого узла, то есть изменить мое окно на 400% от размера узла, и узел должен быть центрирован в нем.

Вот соответствующие примеры моего кода: (или вы можете напрямую перейти к jsFiddle, который я настроил.)

Сначала код, используемый для создания элемента svg:

var w = 4000,
    h = 3000;
var vis = d3.select("#mysvg")
    .append("svg:svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("id","svg")
    .attr("pointer-events", "all")
    .attr("viewBox","0 0 "+w+" "+h)
    .attr("perserveAspectRatio","xMinYMid")
    .append('svg:g')
    .call(d3.behavior.zoom().on("zoom", redraw))
    .append('svg:g');

Затем, в качестве примера, использовалась функция перерисовки направленного графа на «обычном» увеличении.

function redraw() {
    trans=d3.event.translate;
    scale=d3.event.scale;
    vis.attr("transform",
        "translate(" + trans + ")"
            + " scale(" + scale + ")");
}

Вот узлы моего графика:

vis.selectAll("g.node")
    .data(nodes, function(d) {return d.id;})
    .enter().append("g")
    .append("circle")
        .attr("id", function(d){return "circle-node-"+ d.id})
        .attr("fill","white")
        .attr("r","50px")
        .attr("stroke", "black")
        .attr("stroke-width","2px");

И, наконец, вот мой автозаполнение.

$(function() {
    $( "#tags" ).autocomplete({
        source: nodes; //...
        select: function( event, ui){
            // ...
            vis.selectAll("#circle-node-"+ui.item.value)
                .transition()
                .attr("fill", "red")
        }

    })
});

Я старался писать как можно меньше кода, так что извините, если что-то забыл.

Обновление Вот jsFiddle, показывающий, где я сейчас.


javascript d3.js selection zooming force-layout
person Christopher Chiche    schedule 13.12.2012    source источник
comment
Демонстрация jsfiddle.net была бы действительно полезной.   -  person Felix Kling    schedule 13.12.2012
comment
@FelixKling Я настроил jsFiddle по запросу. Спасибо за любую помощь. jsfiddle.net/wRXsK/2   -  person Christopher Chiche    schedule 16.12.2012

Ответы (1)


arrow_upward
4
arrow_downward

Масштабирование и перевод должны обрабатываться в той же функции, где вы окрашиваете узел в красный цвет. Вы на самом деле не описали, как именно вы хотите, чтобы зум вел себя, но, вероятно, самый простой способ - применить translate и scale к элементу g, содержащему график.

Я изменил ваш jsfiddle, чтобы сделать это; результат здесь. Я предположил, что под «400% размера узла» вы подразумеваете, что узел должен быть увеличен на 400%? Я ввел переменную для коэффициента масштабирования, если вы хотите его изменить.

person Lars Kotthoff    schedule 17.01.2013
comment
Спасибо за ответ и демонстрацию. Это то, что я хочу с небольшой проблемой: после выбора узла, когда я снова увеличиваю масштаб чего-либо, позиция сбрасывается. Есть ли способ заставить d3 думать, что автоматическое увеличение точки было таким же, как если бы пользователь увеличил ее? - person Christopher Chiche; 18.01.2013
comment
Конечно, вам просто нужно установить одинаковые значения перевода и масштабирования для поведения масштабирования. См. jsfiddle.net/wRXsK/11. - person Lars Kotthoff; 18.01.2013
comment
Большое тебе спасибо! Я просто рекомендую пользователям futur убедиться, что атрибуты cx и cy существуют, так как у меня была проблема с этим. - person Christopher Chiche; 18.01.2013