Javascript D3 force布局中对象的自动缩放

我有一个力定向图，我实现了一个自动完成，以突出显示一个节点。基本上，一旦您选择了一个节点，它就会被涂成红色。我现在想“缩放”这个节点，这是改变我的窗口大小为400%的节点和节点应该在它的中心

以下是我的代码的相关示例：（或者您可以直接转到I设置。）

首先是用于创建

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');

然后，作为示例，该函数用于在“正常”缩放时重新绘制有向图

以下是我的图表的节点：

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")
        }

    })
}); 

我尽量少写代码，所以，如果我忘了什么，我很抱歉

---

更新以下是我目前的处境

缩放和平移应在将节点涂成红色的相同函数中处理。您还没有真正描述希望缩放的具体行为，但最简单的方法可能是将

translate

和

scale

应用于包含图形的

g

元素

---

我改变了你的JSFIDLE来做这件事；结果。我假设“节点大小的400%”意味着节点应该放大400%？如果您想更改缩放因子，我已经为它引入了一个变量。

演示会非常有用。@FelixKling我根据要求设置了一个JSFIDLE。谢谢你的帮助。谢谢你的回答和演示。这就是我想要解决的一个小问题，在选择一个节点后，当我再次缩放某个对象时，位置会“重置”。有没有一种方法可以让d3认为自动缩放一个点与用户在该点上缩放时是一样的？当然，您只需要为缩放行为设置相同的“平移”和“缩放”值。再见，非常感谢！我只是建议futur用户验证属性“cx”和“cy”是否存在，因为我有一个问题。

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

    })
});