javascript - 将 Treant.js 合并到 Vue.js 应用程序中

Question

我正在尝试将 Treant.js 库合并到我的 Vue 应用程序中，以便从 JSON 数据对象生成 TreeMap 。这是我在主视图中的导入语句...

import Vue from "vue"
import store from "../../store"
import { getWebSocket } from "../../services/util.js"
import '../../assets/css/Treant.css'
import '../../assets/scripts/raphael'

var Treant = require("../../assets/scripts/Treant")

这里是我尝试调用 Treant 构造函数的地方(this.localTrace.route 是 JSON 对象)......

  var tree = new Treant(this.localTrace.route, function() {alert('Tree Loaded')})

当我尝试启动该页面时，我收到一条错误消息，指出“Treant 不是构造函数”，应用程序无法构建树。

反之

我试图像这样在我的 main.js 文件中全局导入库......

import "./assets/scripts/raphael"
import "./assets/scripts/Treant"

当我这样做时，Vue 可以进入 Treant.js 代码，但会给我这个错误

this._R.setSize is not a function
at Tree.handleOverflow (Treant.js?e3b3:842)
at Tree.positionNodes (Treant.js?e3b3:768)
at Tree.positionTree (Treant.js?e3b3:512)
at new Treant (Treant.js?e3b3:2164) 

关于如何使这项工作有任何想法吗？

Answer 1

已经很长时间了，您可能已经找到了解决方案，但仅供访问此步道的其他人使用:打开你的 main.js Vue 初始化文件并添加:

import Raphael from "raphael"

window.Raphael = Raphael

现在树人将能够正确使用拉斐尔了。