Question

I’m creating a data driven display using force graph from D3.

I supply the nodes and links from server data via ajax.

There is a function in D3 Force Layout model which allows you to set the link distance, via a function. I’d like to store this function(s) in a database or have them generated server side at the very least.

Here is a simple example.

        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();

For fields like charge and linkDistance I’d really like the heavy lifting to be done server side.

Whats the “best” way of achieving this? I understand there is something Eval might be able to solve but, most posts say avoid it..

Thoughts?

EDIT:

this is what I am trying to store

"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;"

Here’s where I took it.

ServerSide :

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

Client Side Processing :

        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();

Answer 1

You want to be able to link to different functions, name them.

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; }

and reference them

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

You can do it as an array

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; }
];

or as an object

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; }
};

You said you want to load them dynamically, so load them via a script tag.

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);

And on the server you would return the functions back with the call back

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; }
]);

I used an Array, you can send back an object or just a function if you want.