个人中心
gpt4 book ai didi

reactjs - 在 React/Flux 项目中包含 JointJS 图

转载 作者：行者123 更新时间：2023-12-03 13:42:32 26 4
gpt4 key购买 nike

我正在尝试在我的 React+Flux 项目中包含 JointJS 图。我从现有的可用演示 there 开始.

我的想法是将图表嵌入到更高级别的组件中，该组件将在我的项目中重用。

我想出的结构如下:

index.html

...
<body>
<section id="mySec"></section>
...
<小时/> 
app.js

...
ReactDOM.render(
    <JointJSDiagram id="1"/>,
    document.getElementById('mySec')
);
<小时/> 
JointJSDiagram.react.js

...
var JointJSDiagramStore = require('../stores/JointJSDiagramStore');

class JointJSDiagram extends React.Component {
...
    componentDidMount() {
        var el = this.refs[this.props.placeHolder];
        document.addEventListener("DOMContentLoaded", function(elt){
                return function(){JointJSDiagramStore.buildDiagram(elt)};
            }(el), false);
    }
...
    render() {
        return (<div ref={this.props.placeHolder}/>);
    }
...
}

module.exports = JointJSDiagram;
<小时/> 
JointJSDiagramStore.js

...
var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');

var _graph = new joint.dia.Graph();
var _paper = new joint.dia.Paper({
    width: 600,
    height: 200,
    model: _graph,
    gridSize: 1
});


var JointJSDiagramStore = assign({}, EventEmitter.prototype, {
...
    buildDiagram: function(el) {
        _paper.el = el;
       // In here I used the code from: http://www.jointjs.com/demos/fsa
       function state(x, y, label) {

           var cell = new joint.shapes.fsa.State({
           position: { x: x, y: y },
           size: { width: 60, height: 60 },
           attrs: {
              ...
              ...
              ...
       link(star,  block, 'other', [{x: 650, y: 290}]);
       link(star,  code,  '/',     [{x: 490, y: 310}]);
       link(line,  line,  'other', [{x: 115,y: 100}, {x: 250, y: 50}]);
       link(block, block, 'other', [{x: 485,y: 140}, {x: 620, y: 90}]);
       link(code,  code,  'other', [{x: 180,y: 500}, {x: 305, y: 450}]);
    },
...
});
...
module.exports = JointJSDiagramStore;

问题是，除了一些 (7) 警告之外，没有任何可视化内容:

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by JointJSDiagram.

更新

如果我明确使用 id 而不是像这样的引用:

JointJSDiagramStore.js

...
componentDidMount() {
    var el = document.getElementById(this.props.placeHolder);
    document.addEventListener("DOMContentLoaded", function(elt){
            return function(){JointJSDiagramStore.buildDiagram(elt)};
        }(el), false);
    JointJSDiagramStore.addChangeListener(this._onChange);
}
...
render() {
        return (<div id={this.props.placeHolder}/>);
}
...

我不再收到警告，但占位符 div 上仍然没有显示任何内容。

最佳答案

这个快速测试对我有用。我正在使用 react 0.14.3

class Graph extends React.Component {

    constructor(props) {
        super(props);
        this.graph = new joint.dia.Graph();
    }

    componentDidMount() {
        this.paper = new joint.dia.Paper({
            el: ReactDOM.findDOMNode(this.refs.placeholder),
            width: 600,
            height: 200,
            model: this.graph,
            gridSize: 1
        });

        const rect = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            size: { width: 100, height: 30 },
            attrs: {
                rect: { fill: 'blue' },
                text: { text: 'my box', fill: 'white' }
            }
        });

        const rect2 = rect.clone();
        rect2.translate(300);

        const link = new joint.dia.Link({
            source: { id: rect.id },
            target: { id: rect2.id }
        });

        this.graph.addCells([rect, rect2, link]);
    }

    render() {
        return <div ref="placeholder" ></div>;
    }
}

关于reactjs - 在 React/Flux 项目中包含 JointJS 图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34278642/

26 4 0
文章推荐： reactjs - 在react中将表单数据传递给父类
文章推荐： reactjs - React，用它来区分对象
文章推荐： reactjs - 如何在 React 中处理来自 D3 的大量 DOM 操作以利用其 virtualDOM
文章推荐： reactjs - React+flux 应用程序中的 oidc-client 或 oidc-token-manager
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com