javascript - D3 强制布局，动态创建链接数组

Question

我正在尝试启动并运行强制布局，并且使用从 API 中提取的一些 JSON，然后需要将其操作为正确的格式 D3。

D3 强制布局需要 2 个数组节点 和链接。从 API 返回时，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
  }
]

然后，我需要将此数据拆分为用户类型，su 和 sw 如下所示，并重命名一些属性并添加一些其他属性。

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

在此之后，我有 2 个如下所示的数组，

节点

链接

我一生都无法锻炼:

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

有人有什么想法吗？

理想情况下，我应该能够循环遍历节点数组，并根据节点 id 和链接 id 创建目标和源的链接数组。

Answer 1

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

forEach 对每个数组元素执行一次提供的函数。因此，如果 nodes 有 5 个元素(正如您在链接的图像中可以轻松看到的那样)，并且此函数将为 nodes 数组中的每个元素执行一次，将运行 5 次。

2: why the first link is undefined?

nodes 数组的第一个对象中没有 linked_to 键。因此，您只需检查该键是否存在即可避免 undefined:

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

这里，if(data.linked_to) 检查该 key 。

这是一个演示:

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 您不需要在 forEach 中使用 undescore.js。您可以使用Array.prototype.findIndex .