I am going thorough the jointjs tutorial, in particular HelloWorld (http://www.jointjs.com/tutorial#hello-world). The basic example works fine except for the fact that the space in text: 'my box', results in the strange character. However, adding another small paper as suggested in the tutorial does not work, I do not get 2 working papers as indicated in the tutorial. The suggested addition is
var paperSmall = new joint.dia.Paper({
el: $('#myholder-small'),
width: 600,
height: 100,
model: graph,
gridSize: 1
});
paperSmall.scale(.5);
paperSmall.$el.css('pointer-events', 'none');
How to combine the addition with the main code? The main code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var 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' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
Somehow the tutorial does not specify that the second Paper should be associated with another div in HTML:
<div id="myholder-small"></div>
Related
I know that it's pretty easy to trigger an action in JointJS if you click a markup selector. We can simply add a custom event attr of that markup element, but as far as I know only pointer events are allowed. Is there any way to archive the same for hovering?
For example I have a custom cell with 4 buttons, that are just a bunch of svg tag added via the markup. I want to change the opacity of all other elements on the canvas, depending on the button that was hovered. I have an idea on how to filter everything and change the opacity, but I have no idea on how to trigger that event and know what selector I'm hovering.
You could take advantage of the 'element:mouseenter' event on the paper, then event.target can give you access to sub-elements on the shape.
In the following example, when you hover a color on the button shape, the standard.Rectangle type shapes all change to that color.
This solution takes advantage of adding classes via markup, and checking if the target has the particular class.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.5/joint.css" />
<style>
.joint-paper {
display: inline-block;
border: 1px solid gray;
}
</style>
</head>
<body>
<!-- content -->
<div id="myholder"></div>
<!-- dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.6.5/joint.js"></script>
<!-- code -->
<script type="text/javascript">
var namespace = joint.shapes;
var graph = new joint.dia.Graph({}, { cellNamespace: namespace });
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 300,
gridSize: 1,
cellViewNamespace: namespace
});
class ButtonShape extends joint.dia.Element {
defaults() {
return {
...super.defaults,
type: 'MyShape',
size: {
width: 120,
height: 155
},
attrs: {
body: {
width: 'calc(w)',
height: 'calc(h)',
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 2,
rx: 5,
ry: 5,
pointerEvents: 'none'
},
rectUpper: {
width: 'calc(0.8*w)',
height: 'calc(h/2.5)',
fill: 'cornflowerblue',
stroke: '#333333',
strokeWidth: 2,
x: 'calc(0.1*w)',
y: 10
},
rectLower: {
width: 'calc(0.8*w)',
height: 'calc(h/2.5)',
fill: 'tomato',
stroke: '#333333',
strokeWidth: 2,
x: 'calc(0.1*w)',
y: 'calc(h - calc(h/2.5 + 10))'
},
}
};
}
preinitialize() {
this.markup = [{
tagName: 'rect',
selector: 'body'
}, {
tagName: 'rect',
selector: 'rectUpper',
className: 'upper'
}, {
tagName: 'rect',
selector: 'rectLower',
className: 'lower'
}];
}
}
const buttonShape = new ButtonShape();
buttonShape.position(10, 10);
buttonShape.addTo(graph);
for(let i = 0; i < 5; i++) {
const rect = new joint.shapes.standard.Rectangle();
rect.position(i * 60 + 10, 200);
rect.resize(50, 50);
rect.addTo(graph);
}
paper.on('element:mouseenter', function (cellView, evt) {
const rectangles = graph.getElements().filter((el) => el.get('type') === 'standard.Rectangle');
if (evt.target.classList.contains('upper')) {
rectangles.forEach((rect) => {
rect.attr('body/fill', 'cornflowerblue')
});
}
if (evt.target.classList.contains('lower')) {
rectangles.forEach((rect) => {
rect.attr('body/fill', 'tomato')
});
}
});
</script>
</body>
</html>
I am trying to color each point on my scatterplot according to the continent it is on. I have my code below but I am unsure as to how I can reference the continent field for each entry, and then assign it to the color field in trace1.
I tried something such as below but no luck.
EDIT:: This has been answered -> Also, how can I pull from the github?
Here is my code below.
<!DOCTYPE html>
<html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
<body>
<svg id="visualisation" width="1355" height="333"></svg>
<script src="https://cdn.plot.ly/plotly-2.11.1.min.js" charset="utf-8"></script>
<script>
d3.csv('https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row)
{ return row[key]; });}
const asia = [];
const condition = unpack(rows, 'continent');
const j = 0;
for(let i = 0; i < condition.length;i++ ){
if(condition[i] === 'asia'){
asia[j] = condition[i];
j++;
}
}
console.log(asia[0]);
var trace1 = {
x:unpack(rows, 'lifeExp'), y: unpack(rows, 'gdpPercap'), z: unpack(rows, 'pop'),
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5},
opacity: 0.8},
type: 'scatter3d'
};
var data = [trace1];
var layout = {
width: 1000,
height: 1000,
margin: {
l: 0,
r: 0,
b: 100,
t: 0
},
scene: {
xaxis: { title: asia[1] },
yaxis: { title: "Population" },
zaxis: { title: "GDP per cap" },
},
};
Plotly.newPlot('myDiv', data, layout);
});
</script>
</body>
</html>
Hello I'm trying to execute Hello world application using JointJS library as given in: http://www.jointjs.com/tutorial#hello-world
I have downloaded joint.js(1.0.2) and joint.css files, copied the code given in HelloWorld tutorial in html file, and accessed it from the Chrome browser but it's not working as shown in the tutorial.
Console.error: Uncaught TypeError: this.addCell is not a function
html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>diagram</title>
<link rel="stylesheet" href="node_modules/joint/joint.min.css">
<body>
<div id="diaHolder">
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/lodash/lodash.min.js"></script>
<script src="node_modules/backbone/backbone-min.js"></script>
<script src="node_modules/joint/joint.min.js"></script>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#diaHolder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var 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' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
check versions of dependencies, especial Lodash. JointJS it's not compatible with version 4.x
jQuery: 2.2.4
Lodash: 3.10.1
Backbone: 1.3.3
Just throwing this out there but do you have a starting html tag?
I created this based on their tut http://jointjs.com/tutorial
<html>
<head>
<title></title>
</head>
<body>
<div id="myholder" >
</div>
<link rel="stylesheet" type="text/css" href="joint.css">
<script type="text/javascript" src="joint.js"></script>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var 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' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
</script>
</body>
</html>
But I can't see anything and no error console. If I moved include at the end, I get error joint unknown.
Why ?
You forgot to add the created rectangles and the link to your graph.
Add this line at the end of your script.
graph.addCells([rect, rect2, link]);
Hope this helps.
I am a beginner in html and the joint.js library. I have this code and once I saved it as html on my laptop, it is suppose to draw 2 connected rectangles but nothing appears in the browser.
I downloaded many libraries and put them in the same folder that has the html page but nothing appear too.
What am I suppose to do?
Where can I put the libraries that I want to use in html code?
The libraries that I downloaded are:
backbone.js
core.js
geometry.js
joint.all.css
joint.all.js
joint.all.min.css
joint.all.min.js
joint.css
joint.dia.cell.js
joint.dia.element.js
joint.dia.graph.js
joint.dia.link.js
joint.dia.paper.js
joint.js
joint.min.css
joint.min.js
joint.shapes.devs.js
joint.shapes.devs.min.js
joint.shapes.erd.js
joint.shapes.erd.min.js
joint.shapes.fsa.js
joint.shapes.fsa.min.js
joint.shapes.org.js
joint.shapes.org.min.js
jquery.js
jquery.sortElements.js
lodash.js
raphael-min.js
raphael.js
vectorizer.js
<link rel="stylesheet" type="text/css" href="joint.css" />
<script type="text/javascript" src="joint.js" ></script>
<script type="text/javascript">
$(function() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var 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' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
})
</script>
<div id="myholder" >
</div>
Thanks to all of you ..
The program is working now after I changed the source of the libraries to be website URLs. If I use the once that I downloaded on my computer it does not work again :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "http://denknix.com/astro/lib/joint/www/build/joint.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css" />
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
<script type="text/javascript">
$(function() {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph
});
var 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' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
})
</script>
<title>Test</title>
</head>
<body>
<div id="myholder" >
</div>
</body></html>
Note that you don't need the following two files in your example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src= "http://denknix.com/astro/lib/joint/www/build/joint.all.min.js"></script>
This is because jQuery is already included in joint.js and the other joint.all.min.js is a very old version of JointJS (0.4).
You only need the other two files that you have correctly included:
<link rel="stylesheet" type="text/css" href="http://www.jointjs.com/downloads/joint.css" />
<script type="text/javascript" src="http://www.jointjs.com/downloads/joint.js" ></script>
The problem must lie in how you reference those files once download them to your computer.