首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >无法从F#中的vis节点模块调用功能网络

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

Stack Overflow用户
提问于 2018-07-19 07:35:45
回答 1查看 280关注 0票数 2

我在我的Fable#项目中使用vis.js依赖项,并希望调用网络函数进行可视化以显示网络。如何将JSON数据从F#传递给Network函数?

导入模块的F#代码

代码语言:javascript
复制
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

代码语言:javascript
复制
  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绘制图作为参考

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-23 14:53:42

为了使用vis库,您可以执行以下步骤:

  1. 转到@type/vis npm包
  2. 按照链接复制index.d.ts文件的内容
  3. 粘贴到ts2fable online的左侧面板
  4. 然后,您可以在项目中复制和保存生成的定义文件(例如,在vis.fs中)。你将有4个错误(在写这篇文章的时候)。您可以注释相应的行。

对我来说:

代码语言:javascript
复制
// 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
  1. 现在您可以使用vis.js库了

下面是移植的简单网络代码:

代码语言:javascript
复制
// 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)
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51416892

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档