javascript - 在 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 来执行此操作；结果 here .我假设“节点大小的 400%”是指节点应该放大 400%？如果您想更改它，我已经为缩放因子引入了一个变量。