3

我有一个力导向图，我实现了一个自动完成功能以突出显示一个节点。基本上，一旦你选择了一个节点，它就会变成红色。我现在想在这个节点上“缩放”，这就是将我的窗口更改为节点大小的 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")
        }

    })
});

我试图尽可能少地输入代码，如果我忘记了什么，对不起。

Update Here is a jsFiddle illustrating where I am for now.

4

1 回答 1

4

The scaling and translation should be handled in the same function where you color the node red. You haven't really described how exactly you want the zoom to behave, but probably the easiest way is to apply translate and scale to the g element containing the graph.

I've changed your jsfiddle to do this; result here. I've assumed that by "400% the size of the node" you mean that the node should be magnified 400%? I've introduced a variable for the zoom factor if you want to change it.

于 2013-01-17T16:17:42.457 回答