javascript-在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,说明了我现在的位置.

解决方法:

缩放和平移应在将节点涂成红色的相同功能中进行.您尚未真正描述缩放的行为,但最简单的方法可能是将平移和缩放应用于包含图形的g元素.

我已经更改了您的jsfiddle来执行此操作；结果为here.我以为“节点大小的400％”是指应将节点放大400％？如果您要更改缩放系数,我已经为其引入了一个变量.

标签：d3-js,zoom,selection,force-layout,javascript
来源： https://codeday.me/bug/20191031/1976340.html