Comments (3)
memo for future me
const graphData = [
{
data: {
id: 'start',
label: "start",
count: 50,
color: 'green',
},
},
then
const Grafy = (props) => {
// https://dash.plotly.com/cytoscape/styling
const stylesheet =
[
{
selector: 'node',
label: "thing",
style: {
'font-size': 6,
label: 'data(label)',
'background-color': 'data(color)',
shape: 'data(shape)',
width: 'data(count)',
height: 'data(count)'
}
},
{
selector: 'edge',
style: {
'font-size': 6,
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
width: 'data(weight)',
label: 'data(label)',
}
}
]
const layout = {
name: 'cose-bilkent',
...graphOptions
}
// cy.nodes('[id = "yourId"]').style('background-color', 'desiredColor');
return (
<div className='content'>
<TitleBox info={AppConfig.page('Grafy')} />
<CytoscapeComponent
className='cyto-box'
elements={graphData}
layout={layout}
stylesheet={stylesheet}
/>
</div>
)
}
from cytoscape.js-cose-bilkent.
maybe worth adding something like this to the README even tho
https://dash.plotly.com/cytoscape/styling
has a lot of info.
this is the second time I've come to this library and spen tthe first couple hours digging into code samples to find out the basics.
from cytoscape.js-cose-bilkent.
@dcsan You might want to first read the Cytsocape.js documentation: https://js.cytoscape.org/.
Here are some tutorials: https://blog.js.cytoscape.org/tutorials/.
Your questions are not related to this particular extension, so closing this issue.
from cytoscape.js-cose-bilkent.
Related Issues (20)
- Graph nodes not laid out properly HOT 4
- Can a point have two parent nodes?
- Uncaught TypeError: ani.play is not a function HOT 3
- "ReferenceError: self is not defined" error occurring in unstable branch HOT 2
- Uncaught TypeError: Cannot read property 'getParent' of undefined HOT 9
- Cytoscape 3.3 objects in Vue.js state cause endless recursion HOT 12
- Possible to create a planar graph? HOT 5
- Is there a way to keep the nodes on a single Y axis? HOT 1
- Multiple groups of nodes are distributed HOT 3
- Setting nodeDimensionsIncludeLabels to true works not well for zero degree nodes HOT 4
- v4.1.0 has breaking changes to v4.0 HOT 4
- Uniform node dimensions HOT 1
- Pack disconnected graph components using new utility
- Incremental tiling
- Seed for deterministic layout HOT 4
- Retain node positions when chart is being re-generated with the same dataset HOT 3
- Tree reduction during incremental layout
- Update License HOT 2
- fit not working with huge amount of data HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cytoscape.js-cose-bilkent.