3

強制指向グラフがあり、ノードを強調表示するためにオートコンプリートを実装しました。基本的に、ノードを選択すると赤く色付けされます。このノードを「ズーム」したいと思います。これは、ウィンドウをノードのサイズの 400% に変更し、ノードを中央に配置する必要があります。

私のコードの関連サンプルは次のとおりです: (または、jsFiddle 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');

次に、例として、「通常の」ズームで有向グラフを再描画するために使用される関数。

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 は、私が今のところどこにいるかを示すjsFiddleです。

4

1 に答える 1

4

スケーリングと変換は、ノードを赤く着色するのと同じ関数で処理する必要があります。ズームがどのように動作するかを正確に説明していませんが、おそらく最も簡単な方法は、グラフを含む要素translateに適用scaleすることです。g

これを行うためにjsfiddleを変更しました。結果はこちら。「ノードのサイズの 400%」とは、ノードを 400% 拡大する必要があるということですか? ズーム倍率を変更したい場合は、変数を導入しました。

于 2013-01-17T16:17:42.457 に答える