2017-07-29 48 views
0

我試圖打造「網絡」,並獲得錯誤錯誤選項VisJs創建網絡圖中的對象(角4)

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; }'. 

但在文檔說,這是可選的道具:http://visjs.org/docs/network/edges.html

純JS錯誤沒有轉載。

更新:

附加道具後,在瀏覽器控制檯下一個錯誤 -

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); 
+0

請在在你的問題中包含錯誤消息文本。 – RyanZim

+0

不要鏈接到錯誤,發佈錯誤。作爲文字,而不是圖像。 – RyanZim

+0

在這裏提問時,真正的詞語被讀者看重 - 通常有一種感覺,像「請」和「感謝」這樣的詞語並不難打字,並且我們希望在問題中看到合理的努力。無論如何,聊天可能是最好的修剪 - 將注意力集中在技術細節上。請記住,這不是Facebook':=)' – halfer

回答

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 
    } 
};