Is there a way to display a node label centered inside the node such as cytoscape desktop does by default?
I set css style for nodes and it works:
"text-valign" : "center"
"text-halign" : "center"
Yes, you can control this with the labelValign property as explained in the Wiki StyleObject description. For example:
var myStyle = {
selectors: {
"node": {
labelValign: "middle",
... } } }
$("#cy").cy({style: myStyle, ... })
From the official and actual documentation - text-valign and text-halign are the way to go. They are certainly not css properties however. The possible options are: text-halign - left, center, or right; text-valign - top, center, or bottom.
These options work only for nodes, not for edges.
Offical documentation for more info
Related
My implementation has two lists of elements and you basically connect items from the list on the left to items from the list on the right.
We have set the endpoints to be transparent so on the desktop it looks like you just drag from elements on one side to the other.
It works brilliantly on desktop but on touch devices we need the endpoint to cover exactly the space of the element it is attached to in order for it to work as the user would expect. So in effect the whole element becomes an endpoint.
I can achieve this by making the endpoint a rectangle of the same size and anchoring in the center, but I want to anchor on the right/left. If I anchor in the right/left, then my large endpoint is then half covering the element.
Is there a way of anchoring on the right/left but have the endpoint covering the element entirely? Or offsetting the endpoint somehow so it still covers the element?
Thanks in advance for any help
Btw jsPlumb is awesome
You can do it using a transparent image. I did it that way.
endpoint:[ "Image", { src:"/javascript/project/img/c.png",
cssClass:'node' } ]
If you use jsPlumb.addEndpoint() you can add additional parameters for each endpoint you create.
I got this code from one of the examples:
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:25, height:21, fillStyle: color }, // size and color of the endpoint
isSource:true,
connectorStyle : { strokeStyle: color }, // color of the line AND the arrow
isTarget:false,
maxConnections:20,
anchor: "BottomCenter"
};
var endpointOptions = {
isTarget:true,
endpoint:"Dot",
paintStyle:{
fillStyle: color // color of the end point
},
beforeDrop: function(info){
return handleConnectionDrop(info);
},
dropOptions: exampleDropOptions,
maxConnections: 20,
anchor: "TopCenter"
};
function InitContainer(el, data) {
elem = $(el);
jsPlumb.addEndpoint(el, {
uuid: elem.attr("id")+"sr"
}, exampleGreyEndpointOptions);
jsPlumb.addEndpoint(el, {
uuid: elem.attr("id")+"tr",
parameters: data // store data in the drain Endpoint
}, endpointOptions);
....
}
in this function I added two endpoints to one element, each with different attributes.
The actual problem you have is that the surface of the endpoint needs to be offset from it's position so that it is within the element. This is mentioned in the API docs, but I didn't find an example yet:
http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.paint
You can change the position of a anchor, not only by the documented text (like "TopCenter") But also by a array:
anchor: [0.2, 1,0,1]
Give it a try, You'll be able to position the anchor relative to it's element
I am using Kendo UI treeview to display certain data dynamically. I have no issues with the data loaded. But found one scenario which is as follows
When I click on the expand icon to the left of the node(which has a child node), the expand icon and the collapse icon overlaps with that of the nodes. When the focus moves out of that tabstrip which has the treeview data, then the expand/collapse icon does not overlap and it is to the left of the node. When I hover to the tab strip containing the data , then both the icons overlap with that of the nodes.
Following is the pane and the tab strip declaration
<div id="inner-1" class="configuration k-widget k-header" style="height: 100%; border: 0;background- color:#E1E5E7;"></div>
var leftTabStip=null;
leftTabStip = $("#inner-1").kendoTabStrip().data("kendoTabStrip");
leftTabStip.append({
animation: {
open: {
effects: "fadeIn"
}
},
text: "Sample",
content: '<div id="treeSample" style="overflow:auto;position:relative;border:1px solid #B0B0B0;"> </div><ul class="options"> ',
encoded: false
});
finalPath is the array that contains the tree hierarchy data and I am using these 3 properties id,text and encoded..
var localDataSource = new kendo.data.HierarchicalDataSource({
data:finalPath
});
var groupTree1 = $("#treeSample").kendoTreeView({
dataSource: localDataSource
}).data("kendoTreeView");
Is there any way to ensure that the icons and nodes do not overlap and that even if i hover/ move out of tab strip or click on the icon, the data should be displayed properly like the expand/collapse icon should be to the left of the node and not overlap. Please guide me.
Thanks in advance.
I had the same problem with IE 8 running in compatibility view settings (i.e. IE 7 document mode)
Found this link quite useful:
...The problem is probably hasLayout related in IE 7, so I advise you to experiment whether triggering layout with a zoom:1 style to specific elements will fix the issue...
This css I applied to treeview, fixed the same problem in my case:
li
{
zoom: 1;
}
For layout purposes I need to place 15px space between the bottom of the scrolled contents and the bottom of the container: div class="scroll-pane".
Styling the container .scroll-pane { padding-bottom:15px; } has no influence on the output. Going into the code of plugin jScrollPane(), it is set: elem.css({'padding':0}); so the padding-value is reset.
Is there any way to set a paddingBottom value for the scrolling container?
A css rule should work too!
.scroll-pane {
padding-bottom:15px!important;
}
In jQuery
$('.scroll-pane').parent().css('padding-bottom', '15px');
Should do the trick
I have a jqplot object that has x-axis tick marks/labels rendered on bottom. Basically, there is a stack of charts, all using the same x-axis. I would like to reclaim the bottom axis area from the middle charts for the plot lines.
How can I dynamically relocate the x-axis to top (i.e., northward)
How to make the x-axis label go away? For this I tried
plotobject.axes.xaxis.showLabel = false;
plotobject.replot();
but that seems to have no visible effect. plotobject is what's returned by the original $.jqplot() call and I am using $.jqplot.DateAxisRenderer for xaxis.renderer. I have access only to the plot object.
Thanks
This simple CSS solution is working for me to put the x-axis labels on top of the chart.
.jqplot-xaxis {
position: relative;
top: -30px;
}
well, the label for each axis (which is the axis title) has it's own renderer, and thus it's own options. I use the plugin one ( http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html ) but also the default has a show: true/false setting. ( http://www.jqplot.com/docs/files/jqplot-axisLabelRenderer-js.html )
it should look something like this:
axes: {
xaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Dates',
labelOptions: {
show: true,
fontSize: '10pt'
},
}
}
For putting the x-axis on top, I'm not sure what your problem realy is, but I try to select it with jquery and set it's z-index to something high to bring it on top. Take a look at http://www.jqplot.com/docs/files/jqPlotCssStyling-txt.html for some selection ideas.
I need to create a graph where the edge width is based on one of the edge property values. By looking at https://github.com/cytoscape/cytoscape.js/wiki/StyleObject, I see Cytoscape has a discreteMapper/passthroughMapper/continuousMapper but none of these let me access the edge properties. However, looking at the source code there's also a customMapper, which based on previous Cytoscape documentation(http://cytoscapeweb.cytoscape.org/documentation/mappers) would allow me to access the edge properties and return the width based on them. How do I do this? Inside the style object I tried:
...
width: { customMapper: { functionName: "widthMapper" } },
...
and
var widthMapper = function(data)
{
console.log(data);
};
before the initialization call. By setting a breakpoint to the function I see it never gets called. What am I doing wrong, do I need to add the mapper function somewhere in the Cytoscape object so it can see it?
the right syntax was
...
width: { customMapper: widthMapper },
...