I would like to recreate bent country labels according to the area of the country.
In d3 (or SVG) I can construct a polyline and then use a textpath to have text along it. Example: https://www.w3.org/TR/SVG2/images/text/text-path-startoffset.svg
Is it possible in Cesium to do something similar?
In Leaflet it is implemented like that: http://makinacorpus.github.io/Leaflet.TextPath/
There's no native support for that in the current version of Cesium. It may be mentioned on a wishlist or on a roadmap somewhere, but there are no short-term plans that I know of to add it to Cesium.
Even so, you may be able to find a workaround. For example, SVGs can be used as texturemap image sources in Cesium, so you could possibly use D3 to produce curved text on-the-fly and load the results into a Cesium billboard image or even a Cesium Globe inlay image. It would probably take some experimenting to figure out how to actually wire this up and how well it would work.
Related
I'm trying to draw an axis on a canvas using D3 functionality (as exampled here https://www.tutorialsteacher.com/d3js/axes-in-d3). However every example I've seen is using an SVG while I wish to use canvas. On the other hand I didn't see any indication, in their documentation or elsewhere, that it can't be done in canvas.
Is it possible? If so, how?
In short: no, that's not possible.
D3 is pretty much render agnostic, meaning it can be used to create SVG, Canvas, other HTML elements etc. However, some modules are indeed quite specific, and that's the case of d3-axis.
If you have a look at d3-axis source code you'll see that it append SVG <path>, <line> and <text> elements for creating the axis. For instance:
path.enter().insert("path", ".tick")
Finally, here you have a discussion on this subject, where Bostock (D3 creator) abandons the idea of modifying the d3-axis module for creating axes on HTML canvas.
I am currently using Fabric JS but I dont like the layer/group implementation there but beside of layers fabric js has something useful I cannot find in konva js at the moment: viewports. How much work would it to implement zooming to a certain point (most often the mouse cursor) and also emit mouse events with transformed coordinates?
Use case: I would like to zoom in on a the top most layer and use drawing tools to draw on the zoomed area, so the mouse event coordinates need to fit accordingly.
Thank you :)!
I managed to get it working just by using some demo code and one coordinate scaling, great!
I want to add zooming functionality using d3.js in a bar chart created using dimple.js. See following link for what I did so far. http://jsbin.com/rejof/2/edit
I want to combine both zooming functionality in dimple chart. Thanks in advance.
I don't think you can easily do this, you would probably need to modify the dimple source code as I believe zooming relies on a different dom structure to the one dimple uses. You might find it easier to recreate the chart you require in raw d3, rather than modifying a dimple chart to zoom. Of course I'd love to be proven wrong.
I am trying to create a choropleth using d3 for New Jersey state. I have geojson file created as nj.json. You can see it here:
http://mntest.elasticbeanstalk.com/nj.json
When I try to use it to display on web page, it shows a very small New Jersey map, so small it is easy to miss. See it here:
http://mntest.elasticbeanstalk.com/choropleth_test.html
It shows as a small dot a couple of inches below the text.
Can somebody take a look at the source code and guide me how to increase the map size.
Thanks,
D3 newbie
To change the size of the displayed map, set the scale factor of your projection. You might also want to reset the center of the projection to center what you want to show.
This question might be helpful as well.
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.