-2

D3 のフォース グラフを使用してデータ ドリブン ディスプレイを作成しています。

ajax を介してサーバー データからノードとリンクを提供します。

D3 Force Layoutモデルには、関数を介してリンク距離を設定できる関数があります。この関数をデータベースに保存するか、少なくともサーバー側で生成したいと思います。

簡単な例を次に示します。 

        force
            .gravity(json_data.gravity || 0.15)
            .charge(-150 + json_data.nodes.length)
            .nodes(json_data.nodes)
            .links(json_data.links)
            .linkDistance(function (link, index) {
                if (index % 2)
                    return 30;
                return 50;
            })
            .start();

Charge や linkDistance などのフィールドについては、面倒な作業をサーバー側で行ってもらいたいと思っています。

これを達成するための「最良の」方法は何ですか？Evalで解決できる可能性があることは理解していますが、ほとんどの投稿はそれを避けると言っています..

考え？

編集：

これは私が保存しようとしているものです

"function (link, index) { if (index % 2) return 30; return 50;"

"function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50;"

撮ったのはこちら。

サーバ側 ：

    public JsonGraphDTO(int Id, UnitRepository repository) {
        gravity = 0.15;
        linkDistance = "return 40;";
        ...

クライアント側の処理:

        var fn = new Function('lnk','index',json_data.linkDistance);
        force
            .gravity(json_data.gravity || 0.15)
            .charge(-150 + json_data.nodes.length)
            .nodes(json_data.nodes)
            .links(json_data.links)
            .linkDistance(fn)
            .start();
4

1 に答える 1

0

さまざまな関数にリンクできるようにしたいので、それらに名前を付けます。

function linkDistance1 (link, index) { if (index % 2) return 30; return 50; }
function linkDistance2 (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; }

そしてそれらを参照します

    force
        .gravity(json_data.gravity || 0.15)
        .charge(-150 + json_data.nodes.length)
        .nodes(json_data.nodes)
        .links(json_data.links)
        .linkDistance(linkDistance1)
        .start();

あなたはそれを配列として行うことができます

var linkDistanceFunctions = [
    function (link, index) { if (index % 2) return 30; return 50; },
    function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; }
];

またはオブジェクトとして

var linkDistanceFunctions = {
    "foo" : function (link, index) { if (index % 2) return 30; return 50; },
    "bar" : function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; }
};

それらを動的にロードしたいので、スクリプトタグを介してロードします。

window["myCallBack"] = function(myArrayOfFunctions){
    console.log(myArrayOfFunctions);
};
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= 'myServerSidePage.php?callback=myCallBack';
head.appendChild(script);

そしてサーバーでは、コールバックで関数を返します

myCallBack([
    function (link, index) { if (index % 2) return 30; return 50; },
    function (link, index) { if (index % 3 ==1) return 30; if (index % 3==2) return 40; return 50; }
]);

私は配列を使用しました。必要に応じて、オブジェクトまたは関数だけを送り返すことができます。

于 2012-11-28T22:14:03.273 に答える