0

我是 Rappid 和 Jointjs 的新手，我正在为语法/上下文而苦苦挣扎。对于我的第一个实验，我只想循环一个计数器并创建一些矩形。在每个新矩形上，我想更改文本，但无论我尝试什么，我似乎都无法让它更改文本。我的代码如下 - 感谢您的帮助。

My Rectangle test
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="joint.css" />
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/lodash/index.js"></script>
    <script src="../node_modules/backbone/backbone.js"></script>
    <script src="../node_modules/graphlib/dist/graphlib.core.js"></script>
    <script src="../node_modules/dagre/dist/dagre.core.js"></script>

    <script src="../build/rappid.min.js"></script>
    <!-- <script src="joint.js"></script>-->
</head>
<body>
  <div id="myholder"></div>
  <div id="myholder-small"></div>
  <script type="text/javascript">

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 600,
        height: 800,
        model: graph,
        gridSize: 1
    });
   

    var rect = new joint.shapes.basic.Rect({
        position: { x: 10, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, 
                 text: { text: 'my box', fill: 'white' } 
               }
    });
    
    
    
    for (i = 0; i < 5; i++) {

    	var rect2 = rect.clone();
    	rect2.translate(10,  (50 * i) );
    	rect2.attrs = { rect: {fill:'red'},
    		            text: { text: 'Node ' + i } };

		graph.addCells([rect2]);
    
    };

  </script>
</body>
</html>

4

1 回答 1

0

element.attr()您应该通过方法更改属性。

My Rectangle test
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="joint.css" />
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/lodash/index.js"></script>
    <script src="../node_modules/backbone/backbone.js"></script>
    <script src="../node_modules/graphlib/dist/graphlib.core.js"></script>
    <script src="../node_modules/dagre/dist/dagre.core.js"></script>

    <script src="../build/rappid.min.js"></script>
    <!-- <script src="joint.js"></script>-->
</head>
<body>
  <div id="myholder"></div>
  <div id="myholder-small"></div>
  <script type="text/javascript">

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 600,
        height: 800,
        model: graph,
        gridSize: 1
    });
   

    var rect = new joint.shapes.basic.Rect({
        position: { x: 10, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, 
                 text: { text: 'my box', fill: 'white' } 
               }
    });
    
    
    
    for (i = 0; i < 5; i++) {

    	var rect2 = rect.clone();
    	rect2.translate(10,  (50 * i) );
        rect2.attr({
          rect: { fill:'red' },
          text: { text: 'Node ' + i }
        });

        graph.addCells([rect2]);
    
    };

  </script>
</body>
</html>

于 2018-01-10T18:24:17.977 回答