Using cytoscape.js to draw a graph. I need to add circle above the node at top-right position. After drawing the graph, is there any API wherein we can get positions of nodes.
Also, I have used the code as follows:
elements : {
nodes : [ {
data : {
id : '1',
name : 'A'
}
}
]
}
var pos = cy.nodes("#1").position();
'#1' is the ID of the node in the data attribute. However, we are not able to add the node/circle at that exact position.
If you want to get something like:
then this code adds the circle to a node knowing it's id:
function addCircle(nodeId, circleText){
var parentNode = cy.$('#' + nodeId);
if (parentNode.data('isCircle') || parentNode.data('circleId'))
return;
parentNode.lock();
var px = parentNode.position('x') + 10;
var py = parentNode.position('y') - 10;
var circleId = (cy.nodes().size() + 1).toString();
parentNode.data('circleId', circleId);
cy.add({
group: 'nodes',
data: { weight: 75, id: circleId, name: circleText, isCircle: true },
position: { x: px, y: py },
locked: true
}).css({
'background-color': 'yellow',
'shape': 'ellipse',
'background-opacity': 0.5
}).unselectify();
}
// ...
addCircle('1', 'Bubble A');
but it must be called after the node's positions are known, when the layout settles down.
The locking is there to prevent that node and it's circle get apart.
jsFiddle demo: http://jsfiddle.net/xmojmr/wvznb9pf/
Using compound node which would keep the node and it's circle together would be probably better, once the support for positioning child nodes is implemented.
Disclaimer: I'm cytoscape.js newbie, use at your own risk
Related
I finally got my html2pdf to work showing my web page just how I want it in the pdf(Any other size was not showing right so I kept adjusting the format size until it all fit properly), and the end result is exactly what I want it to look like... EXCEPT even though my aspect ratio is correct for a landscape, it is still using a very large image and the pdf is not standard letter size (Or a4 for that matter), it is the size I set. This makes for a larger pdf than necessary and does not print well unless we adjust it for the printer. I basically want this exact image just converted to a a4 or letter size to make a smaller pdf. If I don't use the size I set though things are cut off.
Anyway to take this pdf that is generated and resize to be an a4 size(Still fitting the image on it). Everything I try is not working, and I feel like I am missing something simple.
const el = document.getElementById("test);
var opt = {
margin: [10, 10, 10, 10],
filename: label,
image: { type: "jpeg", quality: 0.98 },
//pagebreak: { mode: ["avoid-all", "css"], after: ".newPage" },
pagebreak: {
mode: ["css"],
avoid: ["tr"],
// mode: ["legacy"],
after: ".newPage",
before: ".newPrior"
},
/*pagebreak: {
before: ".newPage",
avoid: ["h2", "tr", "h3", "h4", ".field"]
},*/
html2canvas: {
scale: 2,
logging: true,
dpi: 192,
letterRendering: true
},
jsPDF: {
unit: "mm",
format: [463, 600],
orientation: "landscape"
}
};
var doc = html2pdf()
.from(el)
.set(opt)
.toContainer()
.toCanvas()
.toImg()
.toPdf()
.save()
I have been struggling with this a lot as well. In the end I was able to resolve the issue for me. What did the trick for me was setting the width-property in html2canvas. My application has a fixed width, and setting the width of html2canvas to the width of my application, scaled the PDF to fit on an A4 paper.
html2canvas: { width: element_width},
Try adding the above option to see if it works. Try to find out the width of your print area in pixels and replace element_width with that width.
For completeness: I am using Plotly Dash to create web user interfaces. On my interface I include a button that when clicked generates a PDF report of my dashboard. Below I added the code that I used for this, in case anybody is looking for a Dash solution. To get this working in Dash, download html2pdf.bundlemin.js and copy it to the assets/ folder. The PDF file will be downloaded to the browsers default downloads folder (it might give a download prompt, however that wasn't how it worked for me).
from dash import html, clientside_callback
import dash_bootstrap_components as dbc
# Define your Dash app in the regular way
# In the layout define a component that will trigger the download of the
# PDF report. In this example a button will be responsible.
app.layout = html.Div(
id='main_container',
children = [
dbc.Button(
id='button_download_report',
children='Download PDF report',
className='me-1')
])
# Clientside callbacks allow you to directly insert Javascript code in your
# dashboards. There are also other ways, like including your own js files
# in the assets/ directory.
clientside_callback(
'''
function (button_clicked) {
if (button_clicked > 0) {
// Get the element that you want to print. In this example the
// whole dashboard is printed
var element = document.getElementById("main_container")
// create a date-time string to use for the filename
const d = new Date();
var month = (d.getMonth() + 1).toString()
if (month.length == 1) {
month = "0" + month
}
let text = d.getFullYear().toString() + month + d.getDay() + '-' + d.getHours() + d.getMinutes();
// Set the options to be used when printing the PDF
var main_container_width = element.style.width;
var opt = {
margin: 10,
filename: text + '_my-dashboard.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 3, width: main_container_width, dpi: 300 },
jsPDF: { unit: 'mm', format: 'A4', orientation: 'p' },
// Set pagebreaks if you like. It didn't work out well for me.
// pagebreak: { mode: ['avoid-all'] }
};
// Execute the save command.
html2pdf().from(element).set(opt).save();
}
}
''',
Output(component_id='button_download_report', component_property='n_clicks'),
Input(component_id='button_download_report', component_property='n_clicks')
)
I have a cytoscape graph with these extensions:
Automove
Expand-Collapse
In my graph I have normal nodes with smaller nodes beside them (here in yellow). These smaller nodes are set with automove to move along with their linked node.
This happens with this function:
private addCircle(nodeId: string, circleText: string): void {
var parentNode = this.graph.getElementById(nodeId)
if (parentNode.data('isCircle') || parentNode.data('circleId')) return
var px = parentNode.position('x') + 10
var py = parentNode.position('y') - 10
var circleId = (this.graph.nodes().size() + 1).toString()
parentNode.data('circleId', circleId)
this.graph
.add({
group: 'nodes',
data: { id: circleId, name: circleText },
position: { x: px, y: py },
classes: 'XorGroup_' + circleText,
})
.unselectify()
.ungrabify()
this.graph.automove({
nodesMatching: this.graph.getElementById(circleId),
reposition: 'drag',
dragWith: parentNode,
})
}
If I move the "parent" its works totally fine, but if I use the collapse function of the "Expand-Collapse" extension, the nodes are seperated from their "parent" and get placed in the upper left corner.
This collapse event is used on totally different nodes.
I tried to use this function:
cy.nodes().on("expandcollapse.aftercollapse", function(event) { var node = this; ... })
Unfortunatelly it fires before the layout is calculated by the "Expand-Collapse" extension.
Does anybody have an idea how to manage, that the smaller nodes are ALWAYS on the same relative position to their "parent"?
I am displaying in my Vue.js a leaflet Map with Geojson Data.
var map = L.map('map').setView([13.82, 106.62], 5);
// load a tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 6
}).addTo(map);
// The rodents json data need to be replace by a proper HTTPS not local Server
map.setZoom(4);
$.getJSON("C:\Users\simon\Desktop\FE\data\heat.geojson",function(data){
var locations = data.features.map(function(gps) {
// the heatmap plugin wants an array of each location
var location = gps.geometry.coordinates.reverse();
location.push(1.0);
return location; // e.g. [50.5, 30.5, 0.2], // lat, lng, intensity
});
var heat = L.heatLayer(locations, { radius: 25, maxOpacity: .8, scaleRadius: false, valueField: 'total',
// gradient: {
// 0.0: 'green',
// 0.5: 'yellow',
// 1.0: 'red'
// }
});
map.addLayer(heat);
});
On a local browser, I will simply load the data from the file location and it will work. How can I load the data in my local vue.js application?\
If i Change path to : HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - http://localhost:8082/pages/..FE/data/sales_vietnam_heat.geojson
I want to plot a function interactively (i.e. the function has a parameter that can change) using Vega or Vega-Lite. As far as I can tell the data parameter can only be from a file or object.
Obviously I can recreate the entire graph/spec every time the function parameter changes, but I'd rather just update the data, so the entire graph doesn't need to be re-rendered. Is there a way to do that?
My function is too complex for Vega's built-in expression system so please don't suggest that.
You can do this using the Vega view API. Here is an example of a script that inserts dynamically-generated data into a Vega-Lite chart:
var spec = {
$schema: 'https://vega.github.io/schema/vega-lite/v3.json',
data: {name: 'table'},
width: 400,
mark: 'line',
encoding: {
x: {field: 'x', type: 'quantitative', scale: {domain: [0, 100]}},
y: {field: 'y', type: 'quantitative', scale: {domain: [-1, 1]}}
}
};
function makeData(N) {
data = [];
for (x = 0; x < N; x++) {
data.push({x: x, y: Math.sin(x / 10)})
}
return data
}
vegaEmbed('#chart', spec).then(function(res) {
var changeSet = vega.changeset().insert(makeData(100));
res.view.change('table', changeSet).run();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/5.7.0/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/3.4.0/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/5.1.3/vega-embed.js"></script>
<div id="chart"></div>
i need to plot (in cytoscape.js) a circle inscibed to another circle.
I can make the external circle with:
shape:'ellipse',
height: 15,
width: 15,
'background-color': 'white',
'border-width':0.5,
'border-color':'black'
But how can i make the other circle inscribed?
EDIT: In particular, i have to put inside a white circle with black circumference, a smaller white circle with black circumference.
2th EDIT:
I solved by creating a fake node (equal to real one but smaller) that follows the original when dragged or grabbed.
var compAtrr = cy.$('node[type = "originalnode"]');
compAtrr.on('grabon drag',function(evt){
var node = evt.target;
var idnode = node.data('id');
var fakenode = cy.$id(idnode+'fake');
var ix = node.position('x');
var iy = node.position('y');
fakenode.position({
x: ix,
y: iy
});
});
var fakeAtrr = cy.$('node[type = "fakenode"]');
fakeAtrr.on('grabon drag',function(evt){
var node = evt.target;
var idnode = node.data('id');
var l = idnode.length;
idnode = idnode.slice(0,l-4); //remove 'fake' string
var realnode = cy.$id(idnode);
var ix = node.position('x');
var iy = node.position('y');
realnode.position({
x: ix,
y: iy
});
});
Thanks anyway
Have a look at this code pen, you can specify an inner circle by defining the background or a border:
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
...
I am afraid this is not possible in Cytoscape.js. Your best bet is to use a background image.
You can also try setting border style to double, but this is very limited - you won't be able to change the distance between lines.
You can draw arbitrary content on a node with one or more SVG background images.