I am using d3 V4 with geoOrthographic to spin a 3d globe on a canvas.
I have followed and stitched a few example from bl.ocks.org to achieved that. I am new to d3.
So far I have the globe spinning and dots at some city location that appears and disappears accordingly with the globe rotation.
I have also attached the city name to the corresponding dots but I cannot managed to synchronies them with the dots.
So my city name does not appears or disappears at the same time with the dots.
here is a Codepen of my Globe.
Codepen Canvas Globe
I have made a Globe that works as I want to but in SVG
Codepen SVG Globe
however SVG is not possible for me because it is slowing down too much the application once added to it. So I have to go with canvas for performances reason.
I have tired a few solution/ideas from other post on Stackoverflow but could not make it work.
Thanks for the help
I refactored your code from your second example a little more precisely into your first example and it works:
outerArray.forEach(function(d) {
const coordinate = [d[0], d[1]];
const center = [width / 2, height / 2];
gdistance =d3.geoDistance(coordinate,projection.invert(center));
if(gdistance < 1.57079632679490) {
context.fillText(
d[2],
projection(d)[0],
projection(d)[1]
);
}
});
Updated codepen.
Related
I have been struggling for a while with a Angular application that has one component with a map. To be able to rule out any other problems I have done a rewrite in pure javascript to test the functionality but I can't figure out how to solve this.
What I want to do is the same kind of functionality as in for example Google Maps, If you have the cursor over a specific city and zoom in with the mouse scroll then the map zooms in but keeps the city at the same place under the cursor.
I have this code and it's the function "zoomImage" that give me problems..
https://codepen.io/m-rten-sw-rd/pen/BMZvZX
Anyone that could guide me right on this?
function zoomImage(scale, mousePosInCointainer, mousePosInImage) {
var imgElement = document.getElementById("img");
imgElement.width = imgElement.width * scale;
imgElement.height = imgElement.height * scale;
/* TODO: Determine how I'm going to center the image over cursor */
}
I believe the following is what you need to be doing.
Determine transform origin (should be center) of the image.
Determine difference between mouse cursor and that point.
Scale that difference by your scale factor.
Translate the image by that difference.
I am drawing a rectangle on top of a image and then saving the coordinates of both to a Mysql Database table.
Then I have to retrieve the same image and overlaying Rectangle from a Andriod APP
which will not know anything on FabricJS .
It will only know the coordinates of image and rectangle.
Luckily for image it is not a problem as it can be maintained using some Aspect ratio algorithm.
But how to get the coordinates of Rectangle , so that it can be rendered correctly.
Now what I see is Fabricjs saves the coordinates according to window left ,top, width, height. But andriod app expects the coordinates according to image , which fabricjs doesn't provide.
Any suggestions how to achieve this?
Please let me know if somebody didn't understand .
Its a basic and easy statement , hence not adding any fiddle or code.
before saving to database do this:
image.setCoords();
rect.setCoords();
in
image.oCoords.tl, image.oCoords.tr, image.oCoords.bl, image.oCoords.br
and
rect.oCoords.tl, rect.oCoords.tr, rect.oCoords.bl, rect.oCoords.br
you will find 4 objects with both x and y coordinates that represent your absolute position of the object.
tl stands for Top Left, br stands for Bottom Right and so on.
You should have no problem then to make some subtraction and find relative coordinates of the two objects.
Example:
if image has tl (45,80) and rect has tl (80,110) it means that rect coordinate relative to image is (80-45, 110-80) = (35, 30)
Hey guys I am completely new to d3 however I feel like what I am trying to do is simple.
I am literally using the src code from this example
http://techslides.com/demos/d3/worldmap-template.html
BUT I just want to center above the pacific ocean(california would be slightly to right of middle of box)
I came up with this by just trial and error
projection = d3.geo.mercator()
.translate([600, 400])
.center([-100, 5 ])
.scale(300);
which looks like
but I cant zoom out to view the whole original map, it just clips it to this area..
and lastly which is unrelated.. how can I color these countries in an efficient manner. I see in the json each country has its own color but I don't want to have to go in and manually change each one.
Thanks!!
Svg.js animation of rotations works great because it uses the center point of the element by default, even when the element is moving from one spot to another, but now I'm having trouble when I add a clipping path to an image, because the center point is still the center of the original image, even if it is outside of the clipping path. I would like to use the center point of the clipping path instead. The closest thing I could find was a question about d3.js.
var rect = draw.rect(60,60)
var picture = draw.image(img.jpg).clipWith(rect)
picture.animate(1000).rotate(360)
How can I get it working in svg.js?
You can pass a centre of rotation to the rotate() method. All you have to do is work out where the centre of the clip rect is and pass that in. It works out to be 90,80.
this.animate(1000).rotate(
360 + currentRotation, 90,80
)
Demo here
For some reason it doesn't work the first time, but after that it works fine. That seems like a bug in svg.js.
What I'm trying to get done in the example shown below is a pie like shape for a preloader script. The deal with it is that it starts on 0% and finishes on 100%. Depending on the % given the circle behind the gray circle shall fill it self up.
Currently i have the shapes in 2 different canvas's as i had to use clip to actually hide parts of the circle. But as this applied to my overlay with the gray circle i spliced them up. They are by the way both images.
I would really appreciate any effort that you guys put in helping me.
Been trying to solve this issue for ages.
Found the solution.
Seems like i had to use the moveTo
function in order to get the shape to be painted correctly.
Using the
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}
function to use degrees rather than Radians.
-
Hope this helps someone else :)