I would like to add some custom styles to the nodes in my cytoscape graph based on some condition. Is that possible?Specifically, I would like to add multiple borders with inner border as percentage circle. I am open to using predefined percentages. Something like below:
Is this possible? Would be great if someone can suggest a work around.
I can get a single border using the border properties in cystoscape.js. In plain css3, this can be done using pseudo elements, but not sure how that works in cytoscape.js
Cytoscape.js does not support pseudo elements.
If you want custom graphics, you can use background images. If you want them dynamically generated, you can use a function style property value that returns the image URI. You can use the canvas API to create the image.
The pie styles are similar to the purple section in your image, but you have a hollow portion -- so it's probably best to generate the image.
When you create a node, you can add extra information ( API is great )
NEWnode.push({
group: "nodes",
data: {typeCss: 'css1', etc: 'etc'},
// group: css1,
// classes: css1
});
// add node
cy.add(NEWnode);
and get/parse the node informations
cy.nodes().each(function(i) {
}
Related
How can I create a background for a chart that looks like this using D3 chart, or any chart support React Native
Your question is a bit vage but I'll try to help you. If u want to create a chart on D3 you'll use a SVG element, in that case I think the solution is to use their color Scheme to define the color of the SVG element.
This link will redirect you to the d3-scale-chromatic where you can find different types of color schemes to you.
You can also see this link for different approach.
If you want a solid color for your SVG you just need to write the following code on the SVG attributes:
.style("fill", "red")
If you want a color Scheme you should do something like this:
//Create before appending SVG element
const color = d3.scaleOrdinal(d3.schemeSet3); //Choose the scheme you want
.style("fill", function(){
return color
}
I hope it helps
I am new to react-native and i want to achieve the below design in react-native
The blue circle is a slider to chose the date(Date Picker)
The circle inside the slider(Date Picker) changes color when the date is changed
and finally an image inside the circle.
it would be great if anyone could provide links for reference or a library which i can use to create the design shown in the image.
thanks in advance.
you have to create a custom SVG Slider just like this one
I have created a sample for you take a look
react-native-circular-slider-with-breakpoints
Well this is a custom slider which has some break point values. As the slider changes there is a change in the state and based on that the below description view is rendered.
Use this slider and give some css colors and styles to make it round
Here is an example of what I'm doing:
function showNeighbors(ele) {
cy.add(this.cyData.getElementById(ele.id()).neighborhood());
cy.elements().layout(layoutOpts);
}
This is the only why I can find to add the new nodes to the layout. I would like to add nodes similar to how D3 does by having a .enter() function or some way to add nodes to the current layout. Is this possible in Cytoscape.js?
If the layout supports smooth transitioning (like Cola), just stop the layout on the old elements and start a new layout on the entire graph (including the new element): layout.stop(); layout = cy.elements().makeLayout(...); layout.run();
http://js.cytoscape.org/#layouts/layout-manipulation
If the layout doesn't support smooth transitioning, then it will still work but the animation won't necessary be smooth (e.g. a node may initially jump).
We have been working in a Tree Editor. We are displaying icons below the file names. Now, we have a need to display another icons below this already displayed icon. This icon will be displayed based on some parameters. Hence, it is not necessary that always multiple icons will be displayed.
We have our own LabelProvider which correctly returns a single image.
Please, let me know how can I customise my LabelProvider to return multiple images ?
The normal LabelProvider only supports returning a single image per row.
There are some classes available which let you make a composite image from several separate images. The abstract base class for these is CompositeImageDescriptor. The DecorationOverlayIcon class is a concrete class based in this which supports a main image with up to four overlay images (this is what views like Package Explorer use).
If those classes are not enough you can use a label provider based on OwnerDrawLabelProvider - which allows you to draw what you like in the row.
Note: All rows in a tree (or table) are always the same height. A deep image in one row will force all the other rows to be the same depth.
I'm using jQuery Isotope and I'm wondering if there's a built-in (or at least "easy") way to have it dynamically resize elements via a user control, like a slider.
There's a fluid/responsive demo in the documentation, but it resizes elements based on the size of the browser window. I'm looking for something where the window/container would stay the same size, and the user could control the size of the elements by dragging a slider (like the thumbnail size slider in iPhoto).
Is this even possible? I haven't been able to find any examples of Isotope used in this way.
You should try this link: http://isotope.metafizzy.co/demos/relayout.html This sample shows you how an item resizes onclick, but you can transfer this code to make it work with a slider. But as far as I know this plugin uses predefined width and heights via css-classes for its animations, so you might add a lot of css-classes different sizes and it won't work stageless but I am insecure about this. You'll probably need to set the size of an element dynamically. For example you can use the following code to increase the size of an item 5px in width and height:
/* resizing and relayouting the list */
$container.on('click', '.item', function(){
$this = $(this);
$this.width( $this.width() + 5);
$this.height( $this.height() + 5);
//reorganizes the elements in the list
$container.isotope('reLayout');
});
$container is your wrapping element and ".item" is the class of an item. You should probably use a named function for this event handler to bind and call it with your scroller. Hope that helps.