I am trying to focus on any region when it is clicked. for that I'm using following code:
onRegionClick: function(event, code){
$('#map1').vectorMap('set', 'focus', code);
}
Above code works fine for all the regions except when the code is "US". I don't understand why.
The problem is that US has part of its territory in the east. You can pass specific coordinates and scale to US to focus on the main continental part of the US only.
Related
I have a website I'm working on that utilizes DaisyUI and Alpine.js (with intersect plugin).
In one of my templates I have a stepper with sections of content relating to each step. When you click one of the steps to the stepper, it scrolls you to the related section. That part is easy peasy. The difficulty is getting the step to highlight when you've scrolled to the related content manually. My lack of understanding of the intersection observer is what is throwing me off.
Here is a pen I made as a simple illustration of what I'm trying to do: https://codepen.io/jtomeck/pen/dyeVONz
The pen only shows the use of x-intersect alone. It works-ish, but you'll notice that there are bugs if you make the viewport taller. I'd ideally like the step to only highlight when the content is near the top of the screen, or at least more than halfway above the center of the viewport. I've tried:
Using threshold, but there are bugs since it does not observe the direction (from top of viewport or bottom of viewport) the intersection is happening from, as well as the threshold being defined as a percent creates strange behaviors on different sized screens.
Using margin, but it did not appear to work at all. I believe this is option is the right solution, but I'm struggling to find the proper resources online specific to my problem. I believe the answer will come if I can figure out how to manipulate the margin using enter and leave.
If someone wouldn't mind helping me with this I'd greatly appreciate it. Bonus points if all previous steps can remain highlighted when a new step is reached :). Not a requirement though!
I'd like to request that all answers continue to utilize alpinejs since it is a constraint of the project. Thank you in advance!
TLDR - Can anyone help me figure out how to use alpinejs and its intersect plugin to make the step of a stepper component highlight when the content it relates to reaches a certain position in the viewport (scrollspy effect)?
Update: Updated codepen to use:
x-intersect.margin.10%.0.0.0="shownStep = ' STEP NUMBER ID HERE '"
According to the documentation the expected behavior would be to detect intersection "when the element gets within 10% of the top of the viewport." It does not appear to work any differently than just using x-intersect without the margin added. I'm very curious why margin does seemingly nothing. I'm going to keep looking into it, but I'd very much appreciate any guidance anyone can provide about rootMargin and why the intersect plugin does not seem to be applying it properly.
i'm trying react-three/cannon and my goal is to drop a "Cube" and a "GLTF model" from a position and let them land on a "Floor".
it works well for the Cube (he touches the "Floor") but the "GLTF model" drops but never touch the "Floor"...
I think that there's an offset in the model or maybe some scale natively but i cant figure it out. enter image description here
I have some code and a video to illustrate. Thank you all for your help guys !!!
enter image description here
enter image description here
Have you checked where the origin of the GLTF-model is? I often find models on the web where it is not in the center of mass of the geometry. If you work with Blender right click the model and choose 'set origin' and then 'center of mass volume'.
You can also check where the physics box of the GLFT is by making it visible.
Add another tag in the physics tag named <Debug color='black'></Debug> and add your JSXs inside the debug tag.
I think is because something like the image,
the bound box of the collider is bigger than your model.
to fix it, just set the property to size/2:
const [ref, api] = useBox(
() => ({
args: [0.1, 0.1, 0.1], // extents: [x, y, z]
}));
I'm was also struggling with the same issue,
and I checked the code of Pingpong demo, saw it's using args props in the useBox hook.
The Readme didn't give much description about it, but I found this comment in the code
In D3 I am working on customizing and adding to #Rengel's timeline (link shown in JS Fiddle.
I've successfully created a similar timeline based on tracks, and it also allows users to filter project data based on checkbox values. Each piece of data now has a tooltip, and there are letters from another dataset populating underneath the projects in the same svg container. Now finally I want to add a brush like this one - wrobstory's from the blocks website.
I have only recently started to work on brush events so I am very much a noob, which is why I am unsure how I am going wrong. There is a JS Fiddle I created at: https://jsfiddle.net/rootseire/2vq8028o/2/ which shows everything working before the brush gets called. When I select a section of the timeline, the brush appears, it calculates indexes and extent. But it changes the y state of the year and the year text then transitions down the page.
I have been trying to see why this is happening, but I think I need to step back from the code as it might be just that I am not referencing the correct element. Here is the code for when the mouse pointer drags over the interface:
vis.on('mousedown', function(){
brush_elm = vis.select(".brush").node();
new_click_event = new Event('mousedown');
new_click_event.pageX = d3.event.pageX;
new_click_event.clientX = d3.event.clientX;
new_click_event.pageY = d3.event.pageY;
new_click_event.clientY = d3.event.clientY;
brush_elm.dispatchEvent(new_click_event);
});
But I think it might have something to do with the .points selector. How can I make the brush target the x-axis, the project rectangles and the letters together?
Thanks in advance,
P
I have a responsive Image which is working on different mobile resolution.
I want to Ask you, when I clicked on image at any place like top-left, left-botton etc, I want to get its(image) position.Means On which position it is being clicked. I tried the following scenario While Implementation of my Source Code, I get a coordinate on particular place on which The image is clicked.
Problem: Each of Mobile device has different resolution, So, For the same scenario, the coordinate will be differed. I required the implementation like the place of clicked image should be same on every resolution.
please tell me how can I resolve my Issues, And which one is best technology, tell me if anyone has knowledge to resolve this.
There have been some previous posts that try to achieve what you want, the basic logic can be achieved by calculating ratio:
var xratio=225/420; // 420-mouse-x-coord divided by 420
var yratio=38/38; // mouse-y-coord/element height
var x=320*xratio;
var y=38*yratio;
Please see the following references:
How to convert click coordinates of different dimensions into 320 dimension size?
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
I've been working with Jason Davies' Rotate the World and World Countries examples and incorporating a few other bits and pieces to learn about d3.
An example of what I have come up with so far is here.
The small selector in the top left corner will trigger a new 'trip' to be displayed on the globe and the centroid of the trip will be centered in view. This all works well, as does panning and zooming on the globe with the mouse.
However, there's an issue with the present implementation when one zooms in/out, alters the visible trip, then attempts to pan/zoom again: the zoom defaults back to the level it was before the trip change - resulting in a zoom 'jump' I'd like to remove [To see this behaviour, load my MNWE, zoom in with the mouse wheel perhaps 3 times, click the OK button to load 'J07', click on the globe holding the mouse button down and pan a bit - you'll see the jump I'm referring to.].
I'm pretty sure it's just me not updating the scale of my projection correctly, but I don't know enough to troubleshoot further. Jason has implemented a d3.geo.zoom function, which probably should be capable of fixing the issue. My attempt was to call it in my $("#sub").on("click" ... call via:
d3.select("#map").call(d3.geo.zoom().projection(proj).scale(a/2-10).on("zoom.redraw", function() {
d3.select(this).selectAll("path").attr("d", d3.geo.path().projection(proj));
}));
but that gave spurious results after the fact as well.
Lines 344 and 346:
var sc = d3.interpolate(proj.scale(), a / 2 - 10); //344
return function(i) {
proj.rotate(interp(i)).scale(sc(i)); //346
d3.select("#map").selectAll("path").attr("d", d3.geo.path().projection(proj));
//r.world();
};
are probably where I introduce the bug, as the rotation portion works without issue, it's only the scale additions that cause problems.
This can be solved by defining the zoom behavior in global scope.
m = d3.behavior.zoom();
Then update the zoom behavior with the scale in the transition as shown below this will stop the jump effect you have.
d3.transition().delay(250).duration(2250)
.tween("rotate", function() {
interp.source(proj.rotate()).target(coords).distance();
var sc = d3.interpolate(proj.scale(), a / 2 - 10);
return function(i) {
proj.rotate(interp(i)).scale(sc(i));
m.scale(sc(i));//update the zoom in the zoom behavior this will sop the jumping effect
d3.select("#map").selectAll("path").attr("d", d3.geo.path().projection(proj));
//r.world();
};
});
Working code here
Hope this helps.