首页 文章

无法从F＃中的vis节点模块调用功能网络

提问于
浏览 次
2

我在我的Fable-F＃项目中使用vis.js依赖项，并希望调用网络功能进行可视化以显示网络 . 如何将F＃中的JSON数据传递给网络功能？

用于导入模块的F＃代码

open Fable.Import.React
open Fable.Helpers
open Fable.Helpers.React
open Fable.Helpers.React.Props
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import
open Fable.Import.Browser

    [<Import("default", "vis")>]
    let Network (we: React.event)  = jsNative
    let destination = Browser.document.getElementById "app"
    let response = Network destination  JsonData options

Vis.js节点模块代码，它带有三个参数Github

function Network(container, data, options) {
  if (!(this instanceof Network)) {
    throw new SyntaxError('Constructor must be called with the new operator');
  }

  // set constant values
  this.options = {};
  this.defaultOptions = {
    locale: 'en',
    locales: locales,
    clickToUse: false

图表使用JS和HTML Github作为参考

fable-f#

1 回答

  • 1

    要使用vis库，您可以按照以下步骤操作：

    • 转到@types/vis npm包

    • 点击链接并复制 index.d.ts 文件的内容

    • 将其粘贴到ts2fable online的左侧面板

    • 然后，您可以在项目中复制并保存生成的定义文件（例如 vis.fs 中） . 你将（在写这个anwser的那一刻）有4个错误 . 您可以注释相应的行 .

    为了我：

    // At the top of the file
type MomentInput = Moment.MomentInput
type MomentFormatSpecification = Moment.MomentFormatSpecification
type Moment = Moment.Moment

// In the middle of it
type [<AllowNullLiteral>] TimelineStatic =
    interface end
    • 现在您可以使用 vis.js 库

    这是移植的简单网络代码：

    // Fable demo ported from http://visjs.org/examples/network/basicUsage.html
module Client

open Fable.Core
open Fable.Core.JsInterop
open Fable.Import

// We import the vis.css style
importSideEffects "vis/dist/vis.css"

// We create an access to the vis library
// We could put it under vis.fs file but it's easier to access it from here
[<Import("*", "vis")>]
let visLib : vis.IExports = jsNative

// Helper to make the code easier to read
let createNode id label =
    jsOptions<vis.Node>(fun o ->
        o.id <- Some !^id
        o.label <- Some label
    )

// Helper to make the code easier to read
let createEdge from ``to`` =
    jsOptions<vis.Edge>(fun o ->
        o.from <- Some !^from
        o.``to`` <- Some !^``to``
    )

// If I was using this library I would probably write some helpers to have something like:
// Node.empty
// |> Node.withId 1
// |> Node.withLabel "My label"
// |> ...
// Like that the code is cleaner and more flexible

// From here this is almost a 1 to 1 with the JavaScript code
let nodes =
    ResizeArray([|
        createNode 1. "Node 1"
        createNode 2. "Node 2"
        createNode 3. "Node 3"
        createNode 4. "Node 4"
        createNode 5. "Node 5"
    |])
    |> visLib.DataSet.Create

let edges =
    ResizeArray([|
        createEdge 1. 3.
        createEdge 1. 2.
        createEdge 2. 4.
        createEdge 2. 5.
        createEdge 3. 3.
    |])
    |> visLib.DataSet.Create

let datas =
    jsOptions<vis.Data>(fun o ->
        o.nodes <- Some (U2.Case2 nodes)
        o.edges <- Some (U2.Case2 edges)
    )

let container = Browser.document.getElementById("elmish-app");

// Because we don't have any option to pass, we need to give an empty object 
// otherwise vis.js failed at runtime
let network = visLib.Network.Create(container, datas, createEmpty)
    回复于

相关问题