Vis.js - Only show finished network diagram, no animation, no interaction - javascript

I am a little bit struggling on how to use Vis.js to only show the final result of a stabilized graph, without any stabilization animation or interaction possibilities.
Is there someone that could push me to the correct direction?
If I disable physics completely, the graph shows all nodes one overlaying the other naturally.
Thank you already!
EDIT
Here is the code that I have for the options:
Stabilization stabilization = new Stabilization();
stabilization.setFit(true);
BarnesHut barnesHut = new BarnesHut();
barnesHut.setGravitationalConstant(-23000);
barnesHut.setCentralGravity(0);
barnesHut.setSpringLength(0);
barnesHut.setSpringConstant(0.5f);
barnesHut.setDamping(1);
barnesHut.setAvoidOverlap(1);
Physics physics = new Physics();
physics.setEnabled(true);
physics.setBarnesHut(barnesHut);
physics.setSolver(Physics.Solver.barnesHut);
Smooth smooth = new Smooth();
smooth.setEnabled(false);
smooth.setType(Smooth.Type.continuous);
smooth.setRoundness(0);
Edges edges = new Edges();
edges.setSmooth(smooth);
Interaction interaction = new Interaction();
interaction.setDragNodes(false);
Options options = new Options();
options.setPhysics(physics);
options.setEdges(edges);
options.setInteraction(interaction);
Please be aware that this code is used for a wrapper around vis.js, although the options should reflect the vis.js options.
So it is ok if the answer does not contain any Java code but the actual vis.js hints, I will map it to the wrapper implementation myself.

Seems like the animation is disabled by default, by having the stabilize option set to true.
If you still see an animation, then try to increase the iterations option, which is by default set to 1000.
options.setStabilizationIterations(2000);
I have created a simple demo using the latest version of Vis.js (4.19). Bear in mind that the VisJs-Addon uses an older verion of Vis.js (3.11).

Related

Reposition camera to object & lookAt() (React three fiber)

I am trying to transition camera.position and camera.lookAt smoothly between "zoomed out" and "zoomed in" views of individual, randomly placed objects.
The positioning works great. Lerping the lookAt(), however, doesn't seem to be playing nicely with other solutions for traditional ThreeJS ( see #bovesan's answer here) nor addressed by the relevant example on the react-three-fiber docs (link).
Zooming in past the z axis flips the camera around, and at the corners it's wildly distored.
You can see my progress here : https://codesandbox.io/s/three-fiber-zoom-to-object-rlme0?file=/src/App.js
With the relevant bit of code being in App.js on line 63 :
useFrame((state) => {
const step = 0.05;
// `focus` is a state variable that sends a Vec3 of the objects position
zoom ? vec.set(focus.x, focus.y, focus.z + 0.2) : vec.set(0, 0, 5);
// HERE, looking for a way to lerp camera lookAt in a way that can toggle.
state.camera.lookAt(0, 0, 0);
state.camera.position.lerp(vec, step);
state.camera.updateProjectionMatrix();
});
I've spent hours looking for relevant examples/tutorials, but haven't come up with much. I'm afraid I don't have enough ThreeJs experience to be looking in the right direction, though, so any help in any direction would be most welcome.
To anyone who happens upon this later, the solution was figured out over at by #drcmda.
You can find a working example here :
https://codesandbox.io/s/three-fiber-zoom-to-object-camera-controls-solution-final-sbgx0?file=/src/App.js
This is just a slight change on #drcmda 's implementation of camera-controls with normal lerping to move the camera. It’s not perfect (for one, the transition time in camera controls doesn’t seem to be editable, so there’s a weird swing-around thing that happens, when you’re zooming back out) but it definitely solves the problem. (Many thanks to #looeee and #forerunrun for additional help.)
If you'd rather not use another library, #forerunrun's answer in the original thread also works well, but I wasn't able to debug it enough to have it be reliable. (See convo.)

DC.js brush to select range not working with scaleTime

PROLOGUE
This is my first time posting to stackoverflow and i'm a noob with dc.js. Apologies in advance for etiquette transgressions (feedback welcome on this too)
PROBLEM
I have defined a barchart and it displays perfectly, but brushOn(true) is not letting me filter the data. In the past, this seemed to work perfectly with a crosshair appearing as soon as i hovered over the bargraph. Now it is not. Any idea why?! or what i can do to fix it? I'm on day 3 of trying to figure out what is happening. The help is MUCH appreciated!
PREREQS:
https://d3js.org/d3.v5.min.js
crossfilter.min.js
https://unpkg.com/dc#3.0.4/dc.js
CODE FOR BARCHART
I have defined a barchart as follows:
filterDim = cross.dimension(function(d){return d3.timeWeek(d.date);});
var filterGroup = filterDim.group().reduceSum(function(d){
if(d.isTrue){return 1;}
else {return 0;} });
height=400;
if(width == 0){
width = $(dom_id).parent().innerWidth();
}
var hitsbarChart = dc.barChart(dom_id);
hitsbarChart
.width(width).height(height)
.dimension(sentDimension)
.group(allGroups[0].data,allGroups[0].name)
.xUnits(d3.timeWeeks);
hitsbarChart
.x(d3.scaleTime())
.valueAccessor(function(d){return d.value;})
.keyAccessor(function(d){return d.key;})
.round(d3.timeWeek.round)
.yAxis().ticks(d3.format('.3s'));
function calc_domain(chart) {
var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
max = d3.max(chart.group().all(), function(kv) { return kv.key; });
max = d3.timeMonth.offset(max, 1);
chart.x().domain([min, max]);
}
hitsbarChart.on('preRender', calc_domain);
hitsbarChart.on('preRedraw', calc_domain);
hitsbarChart.brushOn(true);
dc.renderAll();
RESEARCH
I found this example which demonstrates something different but outputs a graph with time-series as the x-axis and working brush to select a range of dates.
Also, there this bug with work-around but the work around did not work. I can't imagine that time-series data works more like an ordinal scale than a numerical scale.
It's likely that you have some CSS inadvertently affecting your chart when it was supposed to be control some other part of the page.
This could happen either because you used a generic name which is also used by dc.js or d3.js, or because a style sheet from another library does. All of dc.js's style rules are carefully scoped so that they shouldn't affect anyone else, but many common words are used for class names, so interference the other way is common.
The brushing behavior comes from d3, so I'd try looking at d3's g.brush rect.overlay in the inspector of your developer tools. You should be able to bring it up by right-clicking the background of the chart and selecting Inspect.
If it has something like
pointer-events: none;
or
display: none;
applied to it, find out what applied that (hopefully CSS you control) and try to make the rules more specific.
Of course it's also possible for JavaScript from another library to cause such troubles, but interference from CSS is much more common.

How to change transition duration globally in NVD3?

I want to turn NVD3 charts into PDF documents. Those charts are normally displayed in browser (I can't make a separate instance of each chart for print and for display), I got it all working using PhantomJS, but I have a problem that I can't seem to find a good solution to.
All NVD3 models use transitions, but only some of those transitions are affected by transitionDuration option. Because of those transitions, I now have to use a timeout before "capturing" the screen in PhantomJS to make a PDF, otherwise resulting document pictures those charts mid-transition. Obviously I'd rather not have to wait.
PhantomJS uses print media type to render PDFs, so it's very easy to disable any CSS3 animations (using media query), but I can't find any way of turning D3 transitions off (in other words - forcing a default transition duration of 0). I can detect print media type in JavaScript, but can't find a good way of globally turning off animations in D3/NVD3... That's all I've got and it doesn't really do much:
var chart = nv.models.multiBarChart()
.tooltipContent(tooltip)
.stacked(true)
.showControls(false);
var duration = 1000; // default duration
if(window.matchMedia) {
if(window.matchMedia('print').matches) {
duration = 1; // duration for print
}
}
chart.transitionDuration(duration);
As of NVD3 1.7.1 you can use the duration option:
chart.duration(0);
I cannot think of another solution than modify the nvd3 source. If you replace all the ocurrences of
transitionDuration = 250
for
transitionDuration = 0
in nv.d3.js it should work.

arbor.js for annotated illustration

I'm hoping to use arbor.js as a way of creating annotated illustrations.
The plan:
Fixed size canvas
Draw image to canvas – as an example i've used the silhouette of head.
Then have a mixture of fixed and floating nodes.
var data = {
nodes:{
brain-position:{},
brain-text:{'color':'green','shape':'dot','label':'brain'},
mouth-position:{},
mouth-text{'color':'green','shape':'dot','label':'mouth'},
},
edges:{
brain-position:{ brain-text },
mouth-position:{mouth-text}
}
};
sys.graft(data);
The problems i'm having is that when I try to create a statically positioned nodeBox eg.
nodeBoxes[node.name] = [50,50, w,w] it breaks the link to other linked nodes.
I'm tinkering with halfvis/src/renderer.js file from the downloaded arbor file.
Many thanks
EDIT
Below is an additional image that hopefully visualises the functionality I'm attempting. Probably should have done this first :)
nodeBoxes, in the halfvis example, is an array used to work out where to start drawing edges so the arrows don't overlap with the boxes - is that what you're using it for?
Are you trying to find a way of forcing the 'brain-position' node inside an area?
Please provide a bit more detail of what you're planning and we can probably do this.

How to override or remove a control in Google Map API

I was playing with Google maps for last two days and started understanding little bit about its functionality.
I was using Large Map i.e. 700 X 300 resolution map size and i was trying to implement controls used in small maps.
eg.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 18);
map.setMapType(G_HYBRID_MAP);
**map.setUIToDefault();**
map.enableContinuousZoom();
var customUI = map.getDefaultUI();
customUI.controls.smallzoomcontrol3d=true; //1. trying to override largezoomcontrol3d
customUI.controls.menumaptypecontrol=true; //2. trying to override largezoomcontrol3d
map.setUI(customUI);
map.enableRotation(); //3. Enabling rotation
Here in 1(a). Small zoom control is not getting visible until i remove the line map.setUIToDefault() and add one more line customUI.controls.largezoomcontrol3d=false. Although I was expecting that by writing above code those control will get overridden.
1(b). I tried to use map.removeControl(Control:GControl) where i was not able to pass the correct parameter. I wanted to remove largezoomcontrol3d from map but i was not able to make out how to refer to this control in the current map.
Same overriding problem is occuring here also. The only difference here is that both the controls are visible here menumaptypecontrol and maptypecontrol, here menumaptypecontrol is overlapping on maptypecontrol
I am trying to enable rotation on map but it is not working for me.
thinking about map.removeControl you were quite closely to solution (if I got what you need). take a look here:
Controls
so, you need just use map.addControl function to add exactly what you need instead of what you did.
sorry, forgot about map rotation. I think the following simple example of Google Map can help you (I just never played with rotation, but example looks very simple to learnt from it):
Google Map rotation example

Categories