在D3力布局中自動縮放對象

Question

我有一個強制導向圖，我實現了一個自動完成，以突出顯示一個節點。 基本上，一旦選擇了節點，它就會以紅色顯示。 我現在想要“縮放”這個節點，這將我的窗口改為節點大小的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，說明我現在的位置。

Answer 1

縮放和平移應在您將節點着色為紅色的同一功能中處理。 您還沒有真正描述縮放的確切行為，但最簡單的方法是將translate和scale應用於包含圖形的g元素。

我改變了你的jsfiddle來做這件事; 結果在這里 。 我假設“節點大小的400％”是指節點應該放大400％？ 如果你想改變它，我已經為變焦因子引入了一個變量。