D3 force layout, creating the links array on the fly

Question

I am trying to get a force layout up and running, and I working with some JSON that is pulled from an API that I then need to manipulate into the correct formate D3.

D3 force layout expects 2 arrays nodes and links. On return from the API the JSON looks like this,

    [
  {
    "workbase" : "The House",
    "service_user" : "Joe Blogs",
    "service_user_id" : 100,
    "role" : "Coordinator",
    "staff_name" : "Jim Bean",
    "staff_id" : 1
  },
  {
    "workbase" : "The House",
    "service_user" : "Joe Blogs",
    "service_user_id" : 100,
    "role" : "Documentation",
    "staff_name" : "Jack Daniels",
    "staff_id" : 2
  },
  {
    "workbase" : "The House",
    "service_user" : "Joe Blogs",
    "service_user_id" : 100,
    "role" : "Activities",
    "staff_name" : "Morgan Spice",
    "staff_id" : 3
  },
  {
    "workbase" : "The House",
    "service_user" : "Joe Blogs",
    "service_user_id" : 100,
    "role" : "Wellbeing",
    "staff_name" : "Jonny Walker",
    "staff_id" : 4
  }
]

I then need split this data into user types, su and sw like below, and rename some attributes and add some further attributes.

var sw  = [],
    su = [],
    links = [],
    edges = [];
    d3.json("test_example.json", function(error, json) {
        console.log(json);
        json.forEach(function(data) {
            console.log(data);
            sw.push({ 
                name : data.staff_name,
                id : data.staff_id,
                role : data.role,
                linked_to : data.service_user_id
            });
            if(_.findWhere(su, {name: data.service_user}) == undefined) {
                su.push({ name : data.service_user, id: data.service_user_id });
            }
        });
        var nodes = su.concat(sw);
        nodes.forEach(function(data){
            links.push({
                target: _.findIndex(nodes, function(user) { 
                    return user.id == data.linked_to; 
                }),
                source: data.id
            });
        });
    });

After this I have 2 arrays that looks like this,

Nodes

Links

For the life of my I cannot work out :

• 1: why there are 5 links there should be for and
• 2: why the first link is undefined.

Does any one have any ideas?

Ideally I should be able to loop through my nodes array, and create a links array of tragets and source, based on the node id and linked id.

Answer 1

1: why there are 5 links there should be four?

forEach executes a provided function once per array element. So, if nodes has 5 elements (as you can easily see in the very image you linked) and this function will be executed once for each element in the nodes array, it will run 5 times.

2: why the first link is undefined?

There is no linked_to key in the first object of nodes array. So, you can avoid that undefined simply checking if that key exists:

nodes.forEach(function(data){
    if(data.linked_to){
        links.push({
            target: nodes.findIndex(function(user) { 
                return user.id == data.linked_to; 
            }),
            source: data.id
        });
    }
});

Here, if(data.linked_to) checks for that key.

Here is a demo:

var json = [{
    "workbase": "The House",
    "service_user": "Joe Blogs",
    "service_user_id": 100,
    "role": "Coordinator",
    "staff_name": "Jim Bean",
    "staff_id": 1
}, {
    "workbase": "The House",
    "service_user": "Joe Blogs",
    "service_user_id": 100,
    "role": "Documentation",
    "staff_name": "Jack Daniels",
    "staff_id": 2
}, {
    "workbase": "The House",
    "service_user": "Joe Blogs",
    "service_user_id": 100,
    "role": "Activities",
    "staff_name": "Morgan Spice",
    "staff_id": 3
}, {
    "workbase": "The House",
    "service_user": "Joe Blogs",
    "service_user_id": 100,
    "role": "Wellbeing",
    "staff_name": "Jonny Walker",
    "staff_id": 4
}];

var sw = [],
    su = [],
    links = [],
    edges = [];
json.forEach(function(data) {
    sw.push({
        name: data.staff_name,
        id: data.staff_id,
        role: data.role,
        linked_to: data.service_user_id
    });
    if (_.findWhere(su, {
            name: data.service_user
        }) == undefined) {
        su.push({
            name: data.service_user,
            id: data.service_user_id
        });
    }
});
var nodes = su.concat(sw);
nodes.forEach(function(data) {
    if (data.linked_to) {
        links.push({
            target: nodes.findIndex(function(user) {
                return user.id == data.linked_to;
            }),
            source: data.id
        });
    }
});

console.log(links)

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

PS You don't need undescore.js in that forEach. You can use Array.prototype.findIndex.