javascript - 在 VisJs 中创建网络图时选项对象出错(Angular 4)

Question

我正在尝试创建“网络”，但出现错误

ERROR in F:/vis-test/src/app/app.component.ts (58,53): Argument of type '{ edges: { smooth: { type: string; roundness: number; }; }; nodes: { color: string; fixed: boolea...' is not assignable to parameter of type 'Options'.
  Types of property 'edges' are incompatible.
    Type '{ smooth: { type: string; roundness: number; }; }' is not assignable to type 'EdgeOptions'.
      Types of property 'smooth' are incompatible.
        Type '{ type: string; roundness: number; }' is not assignable to type 'boolean | { enabled: boolean; type: string; forceDirection?: string | boolean; roundness: number; }'.
          Type '{ type: string; roundness: number; }' is not assignable to type '{ enabled: boolean; type: string; forceDirection?: string | boolean; roundness: number; }'.
            Property 'enabled' is missing in type '{ type: string; roundness: number; }'.

但在文档中说它是可选的 Prop :http://visjs.org/docs/network/edges.html

纯 JS 错误未重现。

更新:

添加 Prop 后，浏览器控制台中出现下一个错误 -

ERROR TypeError: Cannot create property 'enabled' on boolean 'true'
    at Object.e.mergeOptions (vis.js:1353)
    at Function.value (vis.js:36856)
    at t.value (vis.js:35888)
    at o.setOptions (vis.js:33348)
    at new o (vis.js:33315)
    at AppComponent.webpackJsonp.../../../../../src/app/app.component.ts.AppComponent.makeTree (app.component.ts:61)
    at SafeSubscriber._next (app.component.ts:21)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
defaultErrorLogger @ core.es5.js:1020
VM129 htmlfile?c=_jp.aktje5b:8 Uncaught DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.
    at http://localhost:4200/sockjs-node/893/bn1xx0t1/htmlfile?c=_jp.aktje5b:8:19
(anonymous) @ VM129 htmlfile?c=_jp.aktje5b:8

我的代码

 const data = {
      nodes: new vis.DataSet(this._generateNodesData(treeData.nodes)),
      edges: new vis.DataSet(this._generateEdgesData(treeData.edges))
    };

    const options = {
      edges: {
        smooth: {
          enabled: true, // error in this place
          type: 'cubicBezier',
          roundness: 0.4,
        }
      },
      nodes: {
        color: '#ff0000',
        fixed: false,
        font: '12px arial red',
        scaling: {
          label: true
        },
        shadow: true
      },
      layout: {
        hierarchical: {
          direction: 'UD'
        }
      },
      physics: false,
      interaction: {
        dragNodes: false,
        dragView: true,
        hover: true
      }
    };

    const container = document.getElementById('vis-tree');
    this.network = new vis.Network(container, data, options);

Answer 1

您必须放置包含所有选项的完整对象:

const options = {
  edges: {
    smooth: {
      enabled: true, 
      type: 'cubicBezier',
      roundness: 0.4 //remove ","
    }
  },
  nodes: {
    color: '#ff0000',
    fixed: false,
    font: '12px arial red',
    scaling: { //add all options
      min: 10,
      max: 30,
      label: {
      enabled: false,
      min: 14,
      max: 30,
      maxVisible: 30,
      drawThreshold: 5
    },
    shadow: true
  },
  layout: {
    hierarchical: {
      direction: 'UD',
      sortMethod: "directed"
    }
  },
  physics: false,
  interaction: {
    dragNodes: false,
    dragView: true,
    hover: true
  }
};