Question

我必须在React.js项目中使用Treant.js librairy，但我有一些问题需要创建图表。事实上，官方网站告诉我们，我们必须导入这样的脚本：

<script src="vendor/raphael.js"></script>
<script src="Treant.min.js"></script>

我认为没有可能会像这样导入脚本...... 我还看到他们制作了一个节点模块（here）。所以我安装了它，我试着像那样导入lib

import Treant from 'treant-js'

此外，我在一个例子中看到他们生成了这样的图表：

<script>
    new Treant( simple_chart_config );
</script>

最后，导入有效，但是当我尝试生成类似

的图表时

{new Treant (this.state.diagram)}

我有这个错误：_treantJs2.default is not a constructor

最后我读过这篇文章：Integrating Treant-js in Angular2 Project他们说要从网站上下载的文件中导入lib，但我认为不可能做出反应......

我已经尝试了很多东西，但我是一个有反应的人，我当然错过了一些明显的东西...... 如果有人有想法帮助我，那会很好:) 谢谢

修改

我尝试直接在反应组件的render方法中导入脚本：

 render(){
    return(
      <div>
        <script src="../lib/vendor/raphael.js"></script>
        <script src="../lib/Treant.js"></script>
        <script>
            new Treant( {this.state.diagram} );
        </script>
        <p>TEST</p>
      </div>
    )
 }

我认为这是好方法，但我仍然有这个错误： Objects are not valid as a React child

Answer 1

我一直在研究几个免费的组织结构图库。我尝试了一些：orgchart（由dabeng撰写），d3-mitch-tree和Treant.js。我成功地在React应用程序中使用了前两者，尽管仅用于基本用途。

我只是试图用Treant.js做同样的事情。这不是直截了当的。解决Treant.js的问题之前，我必须快速学习 CommonJs 。在浏览了其源代码之后，我发现它使用了CommonJs模块系统，因此必须使用 require 语句而不是 import来包含其javascript模块。 语句。您可以在下面看到我的代码。

但是，在运行应用程序时，它显示错误：“未定义Raphael”。调试时，我发现了错误的原因。 Treant.js文件取决于 raphael 库，该库在其 handleOverflow 函数中使用。因此，我在 Treant.js 文件的功能中添加了一行，以包括以下依赖关系：

    // create Raphael instance, set scrollbars if necessary
    handleOverflow: function(treeWidth, treeHeight) {
        //I add this statement which didn't exist in original file
        var Raphael = require("./vendor/raphael")

这是我的代码：

import React from "react";
import "treant-js/Treant.css"
import "treant-js/basic-example.css"

var Treant = require("treant-js/Treant")

export default class MyTreantJs extends React.Component {
constructor(props) {
    super(props);
    this.treant = null
    this.chart_config = null
}

componentDidMount() {
    const loginpathname = window.sessionStorage.getItem("appHomePathName", homepathname)
    const index = loginpathname.indexOf("public")
    const homepathname = loginpathname.substring(0,index)
    const imageurl = homepathname + "/public/images/headshots/"

    const config = {
        container: "#basic-example",            
        connectors: {
            type: 'step'
        },
        node: {
            HTMLclass: 'nodeExample1'
        }
    },
    ceo = {
        text: {
            name: "Mark Hill",
            title: "Chief executive officer",
            contact: "Tel: 01 213 123 134",
        },
        image: imageurl + "2.jpg"
    },

    cto = {
        parent: ceo,
        text:{
            name: "Joe Linux",
            title: "Chief Technology Officer",
        },
        stackChildren: true,
        image: imageurl + "1.jpg"
    },
    cbo = {
        parent: ceo,
        stackChildren: true,
        text:{
            name: "Linda May",
            title: "Chief Business Officer",
        },
        image: imageurl + "5.jpg"
    },
    cdo = {
        parent: ceo,
        text:{
            name: "John Green",
            title: "Chief accounting officer",
            contact: "Tel: 01 213 123 134",
        },
        image: imageurl + "6.jpg"
    },
    cio = {
        parent: cto,
        text:{
            name: "Ron Blomquist",
            title: "Chief Information Security Officer"
        },
        image: imageurl + "8.jpg"
    },
    ciso = {
        parent: cto,
        text:{
            name: "Michael Rubin",
            title: "Chief Innovation Officer",
            contact: {val: "we@aregreat.com", href: "mailto:we@aregreat.com"}
        },
        image: imageurl + "9.jpg"
    },
    cio2 = {
        parent: cdo,
        text:{
            name: "Erica Reel",
            title: "Chief Customer Officer"
        },
        link: {
            href: "http://www.google.com"
        },
        image: imageurl + "10.jpg"
    },
    ciso2 = {
        parent: cbo,
        text:{
            name: "Alice Lopez",
            title: "Chief Communications Officer"
        },
        image: imageurl + "7.jpg"
    },
    ciso3 = {
        parent: cbo,
        text:{
            name: "Mary Johnson",
            title: "Chief Brand Officer"
        },
        image: imageurl + "4.jpg"
    },
    ciso4 = {
        parent: cbo,
        text:{
            name: "Kirk Douglas",
            title: "Chief Business Development Officer"
        },
        image: imageurl + "11.jpg"
    }

    this.chart_config = [
        config,
        ceo,
        cto,
        cbo,
        cdo,
        cio,
        ciso,
        cio2,
        ciso2,
        ciso3,
        ciso4
    ];

    this.treant = new Treant(this.chart_config)
}

render(){
  return (
    <div id="basic-example" style={{height:"600px", width:"1200px"}}></div>
  );
}

}

在这里，basic-example.css文件是从examples文件夹复制的。图表的配置也来自examples文件夹。我使用浏览器的sessionStorage查找图像的位置。到目前为止，我的代码运行良好。

Answer 2

我不确定这是否违反了任何规则 - 这作为评论可能更好，老实说我不知道，但不幸的是，由于缺乏声誉，我无法发表评论，但我真的很想发表评论更新以防其他人发生这种情况。 Lex Soft 上面的答案几乎让我找到了解决方案，但我不得不使用库 treantjs (https://www.npmjs.com/package/treantjs) 而不是 treant-js。

基本上我的导入看起来像这样：

import 'treantjs/Treant.css';
import Raphael from 'raphael';
import React from 'react';
import Treant from 'treantjs/Treant';

Treant = window.Treant; // this package doesn't load as a module properly...
window.Raphael = Raphael;

treant-js 库有点旧，不是官方包，所以不是最新的。当我卸载节点并安装新节点时，我特别遇到了图表仅显示第一个节点的问题。

如何在React项目中集成Treant.js

2 个答案: