我正在研究d3-force 可視化，它需要特定形狀的資料。我有一個物件陣列，每個物件都有一個標簽陣列。
nodes = [
{ name: "post1", tag_list: ["activity", "online"] },
{ name: "post2", tag_list: ["workshop", "online"] },
{ name: "post3", tag_list: ["english", "workshop"] },
...
]
為了建立資料之間的連接，我需要明確定義一個鏈接陣列：
links = [
{
source: 'post1',
target: 'post2'
},
{
source: 'post2',
target: 'post3'
},
...
]
鏈接之間的相似性沒有區別——所有的關系都是線性的并且帶有相同的“代理”。理想情況下，應過濾相同的資料以防止重復行。
如何從陣列中生成前面提到的形狀的鏈接tag_list陣列？
這是所需資料結構的示例。
--
一些背景：我正在嘗試可視化博客頁面之間的主題重疊。所有頁面都有一組標簽來描述它們（tag_list）。我希望連接圖中的所有標簽。由于d3需要詳細的參考來繪制鏈接（見下面的鏈接），我需要從我可以訪問的標簽串列中計算這些。
uj5u.com熱心網友回復：
您可以收集每個標簽，并為每個標簽收集不同的名稱（在一個集合中）。當這樣的標簽已經有與之關聯的名稱時，迭代它們并將其與“當前”名稱配對，將詞法上較小的名稱作為第一個配對成員。將此對存盤在 Set 映射中，以便它們是唯一的。
這是一個實作：
let nodes = [
{ name: "post1", tag_list: ["activity", "online"] },
{ name: "post2", tag_list: ["workshop", "online"] },
{ name: "post3", tag_list: ["english", "workshop"] },
];
let tags = {};
let pairs = {};
let result = [];
for (let {name, tag_list} of nodes) {
for (let tag of tag_list) {
for (let other of tags[tag] ??= new Set) {
let [source, target] = [name, other].sort();
if (!(pairs[source] ??= new Set).has(target)) {
pairs[source].add(target);
result.push({source, target});
}
}
tags[tag].add(name);
}
}
console.log(result);uj5u.com熱心網友回復：
您可以使用哈希分組方法。首先創建一個物件，其中鍵是鏈接的哈希值，然后僅使用值作為結果。
const nodes = [
{ name: "post1", tag_list: ["activity", "online"] },
{ name: "post2", tag_list: ["workshop", "online"] },
{ name: "post3", tag_list: ["online"] },
{ name: "post4", tag_list: ["workshop"] },
{ name: "post5", tag_list: ["lonely"] },
];
const hasIntersection = (arrA, arrB) => arrA.some((el) => arrB.includes(el));
const groupedByHash = nodes.reduce((acc, targetNode) => {
const commonNodes = nodes
.filter(({ tag_list }) => hasIntersection(tag_list, targetNode.tag_list))
.filter(({ name }) => name !== targetNode.name);
if (commonNodes.length < 1) return acc;
const commonLinks = commonNodes.reduce((acc, { name }) => {
const [source, target] = [name, targetNode.name].sort();
const hash = [source, target].join('---');
acc[hash] = { source, target };
return acc;
}, {});
return { ...acc, ...commonLinks };
}, {});
const result = Object.values(groupedByHash);
console.log(result);.as-console-wrapper{min-height: 100%!important; top: 0}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/440738.html
標籤：javascript 数组 目的 d3.js