从JSON构建集合数组绘制韦恩图时出现size未定义错误排查

场景重现 #

直接在JS中显式定义集合数组时，韦恩图能正常渲染：

var sets = [ {sets: ['A'], size: 12}, 
             {sets: ['B'], size: 12},
             {sets: ['A','B'], size: 2}];

// 创建韦恩图，放置在id为matrix_venn的div中
var chart = venn.VennDiagram()
d3.select("#matrix_venn").datum(sets).call(chart);

但从JSON文件读取数据并重构数组时，抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'size')。

JSON文件（matrix_breakdown.json）内容： #

{
    "A": 12,
    "B": 12,
    "A, B": 2
}

重构数组的代码： #

// 导入包含矩阵计数的json文件
import data from './matrix_breakdown.json' assert { type: 'json' };

// 创建数组，用于存放集合名称和大小的字典
var sets = [];
for (let set in data) {
    // 将集合名称拆分为列表
    var set_split = set.split(',');

    // 获取集合的数量（size）
    var set_size = Number(data[set]);

    // 创建要添加到sets数组的字典
    var dict = {};
    dict['sets'] = set_split;
    dict['size'] = set_size;

    // 将字典添加到数组
    sets.push(dict);
}

// 创建韦恩图，放置在id为matrix_venn的div中
var chart = venn.VennDiagram()
d3.select("#matrix_venn").datum(sets).call(chart);

页面HTML代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="matrix_venn"></div>
</body>

<!-- 导入d3 -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- 导入韦恩图模块 -->
<script src="./venn/venn.js"></script>

<!-- 导入绘图代码 -->
<script type="module" src="./matrix_venn.js"></script>

</html>

问题原因 #

表面上重构后的数组和直接定义的数组一致，但实际拆分"A, B"时，split(',')会得到['A', ' B']——第二个元素' B'带有前置空格。venn.js会将集合名称作为唯一标识，带空格的' B'和直接定义的'B'被视为两个不同集合，导致库在计算集合关系时无法匹配到对应数据，进而触发size属性未定义的错误。

解决方案 #

拆分集合名称后，对每个元素进行首尾空格去除处理，修改重构代码中的set_split行：

var set_split = set.split(',').map(item => item.trim());

修改后，"A, B"会被正确拆分为['A', 'B']，和直接定义的数组结构完全一致，venn.js就能正常识别集合并读取size属性，渲染出预期的韦恩图。

内容的提问来源于stack exchange，提问作者eigenVector5