如何在upset.js的Venn图圆圈内添加集合名称及实现外部点击全选

问题1：在Venn图圆圈内添加集合名称 #

通过以下两步实现：

• 确保集合数据包含可显示名称：如果extractSets返回的集合仅含id字段，手动为每个集合添加name属性（直接复用id作为显示名称即可）
• 给VennDiagram组件添加labelPosition="inside"属性，将集合名称渲染至圆圈内部

问题2：点击图表外部选中全部区域 #

通过外层容器事件+阻止内部冒泡实现：

• 给包裹图表的外层div添加点击事件，判断点击目标不属于图表区域时，将selection设置为所有集合的ID数组，实现全选
• 修改图表的onClick回调，阻止事件冒泡，避免内部点击触发外层全选逻辑

修改后的完整代码 #

import { useMemo, useState, useCallback } from 'react';
import { VennDiagram, extractSets, generateCombinations, ISetLike } from '@upsetjs/react';

const YourComponent = () => {
  const elems = useMemo(
    () => [
      { name: "inner", sets: ["S1", "S2"] },
      { name: "left", sets: ["S1"] },
      { name: "right", sets: ["S2"] },
    ],
    []
  );
  const [selection, setSelection] = useState<ISetLike<unknown> | unknown[] | null>(null);

  // 为集合添加name属性用于显示
  const sets = useMemo(() => 
    extractSets(elems).map(set => ({ ...set, name: set.id })), 
    [elems]
  );
  const combinations = useMemo(() => generateCombinations(sets), [sets]);

  const handleOuterClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    // 判断点击是否在图表外部（依赖upset.js默认的组件类名）
    if (!e.target.closest('.upsetjs-venn')) {
      // 设置选中所有集合，实现全选效果
      setSelection(sets.map(s => s.id));
    }
  }, [sets, setSelection]);

  return (
    <div onClick={handleOuterClick}>
      <VennDiagram
        sets={sets}
        combinations={combinations}
        width={250}
        height={150}
        selection={selection}
        onClick={(e, d) => {
          e.stopPropagation(); // 阻止事件冒泡，避免触发外层全选逻辑
          setSelection(d);
        }}
        exportButtons={false}
        labelPosition="inside" // 将集合名称渲染在圆圈内部
      />
    </div>
  );
};

export default YourComponent;

效果说明 #

• 集合名称会直接显示在Venn图的圆圈内部，匹配期望效果
• 点击图表外部区域时，所有集合区域会被选中；点击图表内部区域时，正常触发原有选中逻辑

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