[example] implement zoom example

example/package.json

@@ -16,5 +16,8 @@
     "pulp": "^15.0.0",
     "purescript": "^0.14.2",
     "spago": "^0.20.3"
+  },
+  "dependencies": {
+    "d3": "^7.0.0"
   }
 }

example/src/Main.purs

@@ -13,6 +13,7 @@ import DOM.Simple.Console (log, log2)
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Effect.Class (liftEffect)
+import Effect.Unsafe (unsafePerformEffect)
 import Foreign
 import Math
 
@@ -25,6 +26,7 @@ import Graphics.D3.Selection as Selection
 import Graphics.D3.SVG.Axis as Axis
 import Graphics.D3.Time as Time
 import Graphics.D3.Util
+import Graphics.D3.Zoom as Zoom
 
 main :: Effect Unit
 main = do
@@ -176,20 +178,29 @@ main = do
     >>= Selection.bindData linkNodeData
     >>= Selection.enter
     >>= Selection.append "g"
-    >>= Selection.attr' "transform" (\{ position: Tuple x y} -> "translate(" <> (show $ linkXScale $ toNumber x) <> ", " <> (show $ linkYScale $ toNumber y) <> ")")
+    -- >>= Selection.attr' "transform" (\{ position: Tuple x y} -> "translate(" <> (show $ linkXScale $ toNumber x) <> ", " <> (show $ linkYScale $ toNumber y) <> ")")
   _ <- Selection.append "circle" linkG
+    >>= Selection.attr' "cx" (\{ position: Tuple x _} -> linkXScale $ toNumber x)
+    >>= Selection.attr' "cy" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
     >>= Selection.attr "r" 5
     >>= Selection.attr "stroke" "black"
     >>= Selection.classed "circle" true
   _ <- Selection.append "text" linkG
     >>= Selection.text' (\{ id } -> id)
-    >>= Selection.attr "x" 10
+    >>= Selection.attr' "x" (\{ position: Tuple x _} -> linkXScale (toNumber x) + 5.0)
+    >>= Selection.attr' "y" (\{ position: Tuple _ y} -> linkYScale $ toNumber y)
     >>= Selection.attr "stroke" "black"
     >>= Selection.attr "font-size" "0.5em"
-  _ <- Selection.selectAll "path" linkElSvg
+  _ <- Selection.selectAll "path" linkG
     >>= Selection.bindData linkNodeData
     >>= Selection.join "path"
     >>= Selection.attr "d" linkGen
     >>= Selection.attr "fill" "none"
     >>= Selection.attr "stroke" "black"
+  linkZoom <- Zoom.zoom
+    >>= Zoom.on "zoom" (\ze -> unsafePerformEffect $ do
+      _ <- log2 "zoom" ze
+      _ <- Selection.attr "transform" (Zoom.transform ze) linkG
+      pure unit)
+  _ <- Zoom.renderZoom linkZoom linkElSvg
   log2 "linkEl" linkElSvg

package.json

@@ -14,6 +14,7 @@
     "psc-package": "^4.0.1",
     "pulp": "^15.0.0",
     "purescript": "^0.14.2",
+    "purescript-language-server": "^0.15.2",
     "spago": "^0.20.3"
   }
 }