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

        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 ()

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

By on 11/8/2018 2:13 AM ()

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 ()


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


in the websharper-viewer folder


By on 11/3/2018 12:10 AM ()

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:

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 ()


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

    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

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 ()

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 ()
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