Back to Questions
3.8k
views7
comments
0
score		+
-
D3 events in Websharper
websharpercompilerjavascript

Hi,

I have an SVG that I have inserted as follows

1
2
3
4
5

 let svg = D3.Select("#map").Append("svg")
                .Attr("width", width)
                .Attr("height", height)

 let g = svg.Append("g")

I am trying to set this up so that I can drag it around to pan, as well as zoom with the mouse wheel.

In pure JS, I was able to do it with something like the following:

1
2
3
4
5
6
7

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 8])
    .on("zoom", zoomed)
svg.call(zoom)
function zoomed() {
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

I have tried to do it in d3 with something like this - but it doesn't seem correct at all:

1
2

    let zoom =new System.Action<_>(fun  _ -> g.Attr("transform", "translate("+D3.Event?translate+")") |> ignore)
    svg.Call(zoom) |> ignore

but that doesn't even compile, failing with WebSharper error FS9001: Error parsing direct JavaScript: Exception of type 'WebSharper.Core.JavaScript.Parser+ParserError' was thrown.

Does anyone have any hints on how I can hook up to the event so that I can drag around my SVG?

Thanks

.Reply
Hide this comment

Hi!

Your F# code seems to be missing creating the zoom behavior. This is straight from your JS:

1
2
3

        let zoomed = new System.Action(fun  _ -> g.Attr("transform", "translate("+D3.Event?translate+")") |> ignore)
        let zoom = D3.Behavior.Zoom().ScaleExtent(1., 8.).On(ZoomType.Zoom, zoomed)
        svg.Call(As<Function> zoom) |> ignore

This also shows some lack in the .NET bindings, the Call method does not have an overload that would take a Zoom object (which seems it is also a function in JS), or the Zoom type could inherit from WebSharper.JavaScript.Function. I think either would make sense, let me know what you think would be the better experience to explore the API.

By on 11/4/2018 2:32 AM ()Reply
Hide this comment

This worked perfectly - thanks sorry I didn't see it earlier

By on 11/8/2018 2:13 AM ()Reply
Hide this comment

Where does that error come from? It indicates that you have an inline that doesn't parse correctly, or? Can you post your snippet on Try WebSharper?

By on 11/2/2018 9:39 PM ()Reply
Hide this comment

Hi

I just commented things our so the compile works - I have put it here

https://github.com/jpalmer/Grib-Sharp/tree/websharper

in the websharper-viewer folder

Thanks

By on 11/3/2018 12:10 AM ()Reply
Hide this comment

I am not getting the compiler error you referenced, after uncommenting the two offending lines the project compiles fine, but throws a JS runtime error at runtime:

1

Uncaught TypeError: Cannot read property 'translate' of null

I see you have source maps enabled in your project, so it should pinpoint the location precisely:

I am not well versed in D3, but you can find the D3 bindings in the WebSharper.D3 repo. Here, L1131 gives you D3.Event, which according to the binding has type Dom.Event. I don't see how in your code this is bound to a valid event (and it's null as the error above indicates), nor how that event would be cast to a type that has a translate member.

All in all, this looks more like an issue with how you access/use D3. But if you believe the binding needs a fix (and it very well might as it's quite outdated - v3 according to the manifest), send a PR - always happy to integrate.

By on 11/3/2018 6:00 PM ()Reply
Hide this comment

Hi,

So I am really not an expert enough - it seems like I need something like

1
2
3
4
5

    let zoom =new System.Action(fun () ->
         g.Attr("transform", "translate("+D3.Event.JS?translate+")") |> ignore
        )
    D3.Behavior.Zoom().ScaleExtent(1.,8.).On(ZoomType.Zoom,zoom) |> ignore
    svg.Call(zoom)

Except the problem is that svg.Call wants an Action<t> whilst On just wants an Action.

Since these types are not compatible there doesn't seem to be a type safe way around this.

Is it possible to just write this zoom part in pure JS somehow and bypass the websharper d3 binding somehow?

By on 11/6/2018 2:49 AM ()Reply
Hide this comment

Hi, I already have a response below.

My code there has two differences: I am passing the result of Behavior.Zoom() to the Call (as in your JS code), but I still needed to use an unsafe cast. I need to check into D3 too, to see if this is indeed a JS function object, so maybe Zoom type could inherit from JavaScript.Function to solve this typing problem.

The quickest way to have some pure JS is to use the JS.Inline function in WebSharper. Example: JS.Inline<int>("1 + 1"). You can use $0, $1... placeholders to pass in values like JS.Inline("1 + $0"). See documentation here for full possibilities on JavaScript interop.

By on 11/6/2018 3:29 AM ()Reply

    Topic tags

    See all tags
    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper

    Logging in...