Skip to content

P
purescript-reactix-d3
Commit 0371e1d6 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[example] links feature added, not fully working yet

parent a36b7bbb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 9 deletions
example/dist/index.html
View file @ 0371e1d6
...@@ -7,6 +7,10 @@ ...@@ -7,6 +7,10 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style>svg {
border: solid 1px #ccc;
}
</style>
</head> </head>
<body> <body>
<!--[if lt IE 8]> <!--[if lt IE 8]>
...@@ -26,6 +30,7 @@ ...@@ -26,6 +30,7 @@
<div id="contour"></div> <div id="contour"></div>
<div id="axis"></div> <div id="axis"></div>
<div id="time-axis"></div> <div id="time-axis"></div>
<div id="links"></div>
<!-- NOTE: it's important that this is at the end so that the DOM is ready --> <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
<script type="text/javascript" src="/index.fd532818.js"></script> <script type="text/javascript" src="/index.fd532818.js"></script>
......
example/index.html
View file @ 0371e1d6
...@@ -7,6 +7,11 @@ ...@@ -7,6 +7,11 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
svg {
border: solid 1px #ccc;
}
</style>
</head> </head>
<body> <body>
<!--[if lt IE 8]> <!--[if lt IE 8]>
...@@ -26,6 +31,7 @@ ...@@ -26,6 +31,7 @@
<div id="contour"></div> <div id="contour"></div>
<div id="axis"></div> <div id="axis"></div>
<div id="time-axis"></div> <div id="time-axis"></div>
<div id="links"></div>
<!-- NOTE: it's important that this is at the end so that the DOM is ready --> <!-- NOTE: it's important that this is at the end so that the DOM is ready -->
<script type="text/javascript" src="index.js"></script> <script type="text/javascript" src="index.js"></script>
......
example/index.js
View file @ 0371e1d6
This diff is collapsed.
example/spago.dhall
View file @ 0371e1d6
...@@ -28,6 +28,7 @@ to generate this file without the comments in this block. ...@@ -28,6 +28,7 @@ to generate this file without the comments in this block.
, "psci-support" , "psci-support"
, "reactix-d3" , "reactix-d3"
, "transformers" , "transformers"
, "tuples"
] ]
, packages = ./packages.dhall , packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ] , sources = [ "src/**/*.purs", "test/**/*.purs" ]
......
example/src/Main.purs
View file @ 0371e1d6
...@@ -8,6 +8,7 @@ import Data.Either (Either(..)) ...@@ -8,6 +8,7 @@ import Data.Either (Either(..))
import Data.Int (toNumber) import Data.Int (toNumber)
import Data.Maybe (Maybe(..)) import Data.Maybe (Maybe(..))
import Data.Traversable (traverse) import Data.Traversable (traverse)
import Data.Tuple (Tuple(..))
import DOM.Simple.Console (log, log2) import DOM.Simple.Console (log, log2)
import Effect (Effect) import Effect (Effect)
import Effect.Aff (launchAff_) import Effect.Aff (launchAff_)
...@@ -17,6 +18,7 @@ import Math ...@@ -17,6 +18,7 @@ import Math
import Graphics.D3.Base import Graphics.D3.Base
import Graphics.D3.Contour as Contour import Graphics.D3.Contour as Contour
import Graphics.D3.Link as Link
import Graphics.D3.Request import Graphics.D3.Request
import Graphics.D3.Scale as Scale import Graphics.D3.Scale as Scale
import Graphics.D3.Selection as Selection import Graphics.D3.Selection as Selection
...@@ -133,3 +135,46 @@ main = do ...@@ -133,3 +135,46 @@ main = do
>>= Selection.append "g" >>= Selection.append "g"
>>= Axis.renderAxis timeAxis >>= Axis.renderAxis timeAxis
log2 "timeScale" timeScale log2 "timeScale" timeScale
let linkNodeData = [
{id: "D3", position: Tuple 2 0, parentPosition: Tuple 2 0}
, {id: "Shapes", position: Tuple 1 1, parentPosition: Tuple 2 0}
, {id: "Scales", position: Tuple 3 1, parentPosition: Tuple 2 0}
, {id: "Links", position: Tuple 0 2, parentPosition: Tuple 1 1}
, {id: "Areas", position: Tuple 1 2, parentPosition: Tuple 1 1}
, {id: "Arcs", position: Tuple 2 2, parentPosition: Tuple 1 1}
, {id: "Ordinal", position: Tuple 3 2, parentPosition: Tuple 3 1}
, {id: "Quantize", position: Tuple 4 2, parentPosition: Tuple 3 1}
]
linkXScale <- Scale.linearScale
>>= Scale.domain [0.0, 4.0]
>>= Scale.range [25.0, 175.0]
>>= Scale.toFunction
linkYScale <- Scale.linearScale
>>= Scale.domain [0.0, 2.0]
>>= Scale.range [25.0, 175.0]
>>= Scale.toFunction
linkGen <- Link.linkVertical
>>= Link.source (\d -> d.parentPosition)
>>= Link.target (\d -> d.position)
>>= Link.x (\{ position: Tuple x _ } -> linkXScale x)
>>= Link.y (\{ position: Tuple _ y } -> linkYScale y)
linkElSvg <- Selection.rootSelect "#links"
>>= Selection.append "svg"
>>= Selection.attr "width" 200.0
>>= Selection.attr "height" 200.0
_ <- Selection.selectAll ".circle" linkElSvg
>>= Selection.bindData linkNodeData
>>= Selection.join "circle"
>>= 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.selectAll "path" linkElSvg
>>= Selection.bindData linkNodeData
>>= Selection.join "path"
>>= Selection.attr "d" linkGen
>>= Selection.attr "fill" "none"
>>= Selection.attr "stroke" "black"
log2 "linkEl" linkElSvg
spago.dhall
View file @ 0371e1d6
...@@ -18,7 +18,8 @@ to generate this file without the comments in this block. ...@@ -18,7 +18,8 @@ to generate this file without the comments in this block.
, "functions" , "functions"
, "prelude" , "prelude"
, "psci-support" , "psci-support"
, "reactix" ] , "reactix"
, "tuples" ]
, packages = ./packages.dhall , packages = ./packages.dhall
, sources = [ "src/**/*.purs", "test/**/*.purs" ] , sources = [ "src/**/*.purs", "test/**/*.purs" ]
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment