D3力布局中的对象自动缩放

我有一个强制有向图，我实现了一个自动完成，以突出显示一个节点。基本上，一旦你选择一个节点，它就会被染成红色。我现在想在这个节点上“缩放”，这会将我的窗口更改为节点大小的400％，并且节点应该居中放置。D3力布局中的对象自动缩放

这里是我的代码的相关样品（或者你可以直接去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说明我现在在哪里。

来源

2012-12-13 Christopher Chiche

http://jsfiddle.net/ demo会非常有帮助。 –

@FelixKling我按要求设置了一个jsFiddle。谢谢你的帮助。 http://jsfiddle.net/wRXsK/2/ –

缩放和平移应该在红色节点相同的函数中处理。你还没有真正描述过你想要缩放的行为，但最简单的方法是将translate和scale应用于包含该图的g元素。

我已经改变了你的jsfiddle来做到这一点;结果here。我假定“节点大小的400％”是指节点应放大400％？如果你想改变它，我已经为变焦系数引入了一个变量。

来源

2013-01-17 16:17:42

谢谢你的答案和演示。这就是我想要的，在选择一个节点后，当我再次放大位置“重置”时，仍然存在一个小问题。有没有办法让d3认为自动缩放点与用户放大点相同？ –

当然，你只需要为缩放行为设置相同的平移和缩放值。见http://jsfiddle.net/wRXsK/11/ –

非常感谢！我只是推荐未来用户验证属性“cx”和“cy”存在，因为我有问题。 –

D3力布局中的对象自动缩放

回答

相关问题