I am new to Rappid and Jointjs and I am struggling with syntax/context. For my first experiment, I simply want to loop over a counter and create a number of rectangles. On each new rectangle I'd like to change the text but whatever I try I can't seem to get it to change the text. My code is below - thanks for any help.
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>
You should change the attributes via
element.attr()method.