Update index.html

RasperRevision · Jul 2, 2024 · 8e8508b · 8e8508b
1 parent f809c04
commit 8e8508b
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/specification/index.html b/specification/index.html
@@ -71,6 +71,14 @@
           .append('g')
           .attr('transform', `translate(${width / 2},${height / 2})`);
 
+        // Define blur filter
+        svg.append('defs')
+          .append('filter')
+          .attr('id', 'blur-filter')
+          .append('feGaussianBlur')
+          .attr('in', 'SourceGraphic')
+          .attr('stdDeviation', 5);
+
         const root = d3.hierarchy(data);
 
         const tree = d3.tree()
@@ -101,7 +109,6 @@
           .attr('transform', d => `translate(${project(d.x, d.y)})`)
           .attr('cursor', 'pointer')
           .style('fill', 'rgba(0, 0, 0, 0.5)')
-          .style('backdrop-filter', 'blur(5px)')
           .on('click', (event, d) => {
             setFocusedNode(d);
             updateVisibleNodes(d);
@@ -118,7 +125,6 @@
           .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden')
           .style('fill', 'white');
 
-
         text.each(function (d) {
           d.bbox = this.getBBox();
         });
@@ -132,7 +138,8 @@
           .attr('width', d => d.bbox.width + padding)
           .attr('rx', 5)
           .attr('ry', 5)
-          .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden');
+          .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden')
+          .style('filter', 'url(#blur-filter)'); // Apply blur filter
 
         function project(x, y) {
           const angle = x - Math.PI / 2;
@@ -171,7 +178,6 @@
             .style('visibility', d => (visibleNodes.has(d.data.name) || d.depth === 0) ? 'visible' : 'hidden');
         }
       })
-
     });
 
   </script>