如何在d3 js javascript中制作维恩图的数据结构

How to make datastructure of venn diagram in d3 js javascript

本文关键字：数据结构 d3 js javascript      更新时间：2023-09-26

我有这个数组data

var array = [
    {"package": "20Dresses - Shop Women Fashion", "total": 4857},
    {"total": 24, "competingapps": "com.stylecracker.android"},
    {"total": 578, "competingapps": "com.shopping.limeroad"},
    {"total": 291, "competingapps": "com.craftsvilla.app"},
    {"total": 430, "competingapps": "com.voonik.android"}
];

从这个数组数据中，我必须为维恩图制作以下数据结构。

var vennSets = [
     {"sets": [0], "label": "20Dresses - Shop Women Fashion", "size": 4857},
     {"sets": [1], "label": "com.stylecracker.android", "size": 24},
     {"sets": [2], "label": "com.shopping.limeroad", "size": 578},
     {"sets": [3], "label": "com.craftsvilla.app", "size": 291},
     {"sets": [4], "label": "com.voonik.android", "size": 430},
     {"sets": [0, 1], "size": 24},
     {"sets": [0, 2], "size": 578},
     {"sets": [0, 3], "size": 291},
     {"sets": [0, 4], "size": 430},
]

我不明白我如何才能实现上述结构。如有任何帮助，我将不胜感激。

谢谢

它只需要一些基本的转换

// considering array is your initial array;
var singleItems = [];
var intersections = [];
var vennSets;
array.forEach(function(item, index) {
  singleItems.push({
    sets: [index],
    label: item.package || item.competingapps,
    size: item.total
  });
  if (item.competingapps) {
    intersections.push({
      sets: [0, index],
      size: item.total
    });
  }
});
vennSets = singleItems.concat(intersections);

你可能会坚持使用更实用的转换方式，以避免临时变量(singleItems和intersections)造成外部作用域污染;

var result = array.reduce(function(prev, item, index) {
  prev.push({
    sets: [index],
    label: item.package || item.competingapps,
    size: item.total
  });
  if (item.competingapps) {
    prev.push({
      sets: [0, index],
      size: item.total
    });
  }
  return prev;
}, []).sort(function(a, b) { return a.sets.length < b.sets.length; });
相关文章：