fix: sort data for occlusion

antvis · May 31, 2023 · fec7bc8 · fec7bc8
1 parent cd92a6b
commit fec7bc8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/site/examples/general/venn/demo/venn.ts b/site/examples/general/venn/demo/venn.ts
@@ -33,8 +33,10 @@ chart
     text: (d) => d.label || '',
     transform: [{ type: 'contrastReverse' }],
   })
-  .style('opacity', 0.4)
-  .legend(false)
-  .tooltip({ title: { channel: 'label', valueFormatter: '.1f' } });
+  .style('opacity', (d) => (d.sets.length > 1 ? 0.001 : 0.5))
+  .state('inactive', { opacity: 0.2 })
+  .state('active', { opacity: 0.8 })
+  .interaction('elementHighlight', true)
+  .legend(false);
 
 chart.render();
diff --git a/src/data/venn.ts b/src/data/venn.ts
@@ -23,15 +23,14 @@ export const Venn: DC<VennOptions> = (options) => {
   const [key, path] = as;
   return (data) => {
     // Transform the data, venn layout use `sets` and `size` field.
+    const vennData: VennData[] = data.map((d) => ({
+      ...d,
+      sets: d[sets],
+      size: d[size],
+      [key]: d.sets.join('&'),
+    }));
     // Sort data, avoid data occlusion.
-    const vennData: VennData[] = data
-      .map((d) => ({
-        ...d,
-        sets: d[sets],
-        size: d[size],
-        [key]: d.sets.join('&'),
-      }))
-      .sort((a, b) => a.sets.length - b.sets.length);
+    vennData.sort((a, b) => a.sets.length - b.sets.length);
 
     // Layout venn data.
     const solution = venn(vennData);
@@ -45,7 +44,10 @@ export const Venn: DC<VennOptions> = (options) => {
           ? circles
           : scaleSolution(solution, width, height, padding);
         const setCircles = setsValue.map((set) => circles[set]);
-        return intersectionAreaPath(setCircles);
+        let p = intersectionAreaPath(setCircles);
+        // Close the path for event picker.
+        if (!/[zZ]$/.test(p)) p += ' Z';
+        return p;
       };
 
       return { ...datum, [path]: pathFunc };