I am trying to build a network with vis with labels inside the nodes where the text scales with the value. Based on the 'scaling' documentation for nodes, this should be possible.
I took the example network code from the getting started section of the documentation and added values to the nodes. If I set the shape to something with the label external (like 'square'), the nodes change size: Fiddle
But if I change to shape where the label is inside the node, they no longer scale: Fiddle
I'm guessing it's a problem with my options, but I did the part of setting nodes.scaling.label.enabled to true:
var options = {
nodes: {
shape: 'square',
scaling: {
label: {
enabled: true
}
}
}
};
Related
I am trying to space out the nodes between the various nodes that are in my network. Now, the network has a lot of nodes with many relationships between them. However, no matter how much I play with the layout and hierarchical options, the nodes are always overlapping each other when they show up on the screen. I have tried to adjust the various options shown below to no avail. Is it possible to space the nodes out further? I don't mind a scrollbar either.
const options = {
layout: {
// improvedLayout: true,
// clusterThreshold: 500,
hierarchical: {
direction: "UD",
sortMethod: "directed",
nodeSpacing: 100,
//treeSpacing: 100,
edgeMinimization: false,
parentCentralization: true
},
},
};
I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different:
(using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)
Markers.map((marker) => {
const chartMarker = chart.addChartMarkerXY()
.setPosition({ x: new Date(marker.x) - startDate, y: marker.y });
chartMarker
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setContent([
['Type']
])
)
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
.setDraggingMode(UIDraggingModes.notDraggable)
.setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.
console.log("style", chartMarker.getGridStrokeXStyle());
});
The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.
I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:
As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.
.setDraggingMode(UIDraggingModes.notDraggable)
Here are some examples of styling different parts of the Chart Marker properly:
When initialing loading the vis network chart, all nodes crowded together, due to some reason I could not set layout improvedLayout to true, and also I need to set physics to disable.
here is my option setting, please advise how I can let the nodes positioned well within the following option setting.
var options = {
"edges": {
"smooth": { "forceDirection": "none" }
},
"physics": { "enabled": false, "minVelocity": 0.75 },
"layout": { improvedLayout: _improvedLayout }
}
initialing loading, all nodes stay together which makes me hard to see them:
with improvedLayout set to true, it displays well, but the performance is really bad I could not set it in this way.
here is an example: I have 77 edges and 65 nodes, it took 7-8 seconds to draw the network picture when I set improvedLayout to true, is that normal?
I am using a 2d line graph of vis.js (http://visjs.org/graph2d_examples.html ). Is there any way to add a tooltip to the data points so that when you mouse over or click you see the value in a pop up or somewhere else?
This is a feature they plan on adding.. the closest thing I see is this comment on trying to tackle the issue themselves:
https://github.com/almende/vis/issues/282#issuecomment-65728474
This solution is rather simpe:
Add label to points, eg.
var point = {
x: ...,
y: ...,
label: {
content: POINT_LABEL
}
};
points.push(point);
var dataset = new vis.DataSet(points);
Reference:
https://github.com/almende/vis/issues/282#issuecomment-217528166
There is one option in openlayers selecting features under the box. But, I want to select the features when I draw line (draw with shift key down-free hand drawing). In my script I already implemented drawing and selecting options. I can draw line and select (multiple) features independently. Now, I want to merge this two. I want to select those features data which are touched by my drawn line. Is there any sample example available?
Here, I have given sample code -
//Selection property---------------------------------------
var selectControl = new OpenLayers.Control.SelectFeature(
[vectorLayer],
{
clickout: true, toggle: true,
multiple: true, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
);
map.addControl(selectControl);
selectControl.activate();
var draw = new OpenLayers.Control.DrawFeature(
vectorLayer, OpenLayers.Handler.Path,
{displayClass: "olControlDrawFeaturePoint", title: "Draw Features", handlerOptions: {holeModifier: "altKey"}}
);
Thanks, in advance.
You have to register event "sketchcomplete" that will run over all features in layer-bo-be-selected and check if it has shared geometry with line sketched.
Something like this, unfortunately I can't test it now.
vectorLayer.events.register('sketchcomplete', vectorLayer, sketchCompleteFunc);
function sketchCompleteFunc(obj) {
for (var i=0;i<layer-to-be-selected.features.length;i++) {
if (layer-to-be-selected.features[i].geometry.intersects(obj.geometry)) {
selectControl.select(layer-to-be-selected.features[i])
}
}
}