Develop Reference

Show two tooltips on d3.curveLinearClosed?

I need your help!
I have to show a tooltip on the curve using d3, I already have that functionality and it does work, but now I have to show two separated tooltips on one curve.
Let me explain, I used to use this curve appearance, it is a simple d3 curve, and the tooltip works perfectly. And now need to use this curve appearance -
https://github.com/d3/d3-shape#curveLinearClosed
And I'd like to know how to show one tooltip on the bottom of the curve and a second on the top.
So far my implementation of the tooltip works only on the top, I think that happens because d3 draws the bottom line on its own.
So did anybody have a similar problem?
This is a picture how it should look like:
I do not need the code, I'd like to hear any thoughts or ideas about that.

Pan and zoom on an "infinite" graph paper background in js

For a project I'm working on I would like to have a background that I can pan around indefinitely, zoom in and out of and position and move around elements on that background.
The closest example I can think of is this: https://www.desmos.com/calculator. Additionally I will position different elements on top of that grid and move them around. For that I plan to use React and that isn't going to be much of a problem. The main issue I have is how to build the said background so that it can check all my requirements. I'm able to draw a grid but for moving around and zooming in and out (such that all the elements "on top" of the grid also scale up and down) is proving challenging for me. I would also like it if it can be done without the use of any specific drawing libraries and just pure JS but i'm open to suggestions. Any help will be appreciated.
P.S. I'm looking for general guidelines to how I can achieve my goal. For example different technologies or methods and not concrete solutions. I apologise if the question is too vague or badly formatted as it's the first time I'm asking here.

Desmos uses canvas to draw the "infinite" grid. You can achieve this using something like three.js or konva.js. One drawback of canvas is that you cannot place HTML elements on the grid.
Edit: Using three JS, you can use the gridHelper function and set the rotation about the x-axis by Pi. This should give you a "2d" grid. However, I found gsap and the Draggable plugin were better suited for this.
https://codepen.io/osiv/pen/gOwxmvO
This is definitely a work-in-progress, but it gives the idea of what I am working for. Zooming is basically preventing the default wheel behavior and changing the background image size:
handleWheelEvent(e) {
e.preventDefault();
let el = document.getElementById("grid-container");
let currengBackgroundSize = this.getPixelStringAsInteger(getComputedStyle(el).backgroundSize);
if(e.deltaY < 0) {
// decrease size
} else {
// increase size
}
}

Deal With images same as Maps In Javascripts

is there any tool to help me work with an image in the same way i can deal with map, the task is to create a tool that will allow the user to upload a building layout and then set on it points that referring to row data.
i achieved that with Canvas but I'm not feeling it's completed or perfect
Because for example implementing zooming and dragging will make me lose a lot of things like mouse hover on the provide points or the x, y once it's zoomed is different from the actual image (Without zooming)
so any one now like these tool

EaselJS/canvas - how to draw figure B after figure A, so that figure B is "under" figure A

I have been working on this game for a few days now. One of the last problems I am facing is this:
When the player moves out of the border moving area (see picture below) the "line" is drawn behind him - he creates some kind of a wall (see directed arrows on the picture).
After this, he is able to move on this wall, BUT you cannot see the player (small red rectangle), until he moves right (in this case) to the white area.
You can see that the player can be seen when he is positioned on the gray border walls, but these walls were created before the player was created.
How should I change the rendering here to be able to see the player on the area that was drawn after the player? Do I need to redraw everything to be able to get it the way I need it?
Any suggestions highly appreciated. If I was not clear enough, let me know so I can explain it better.
Thanks

EasleJs will by default consider the objects just pile up in the order you provide them.
Yet, you can use AddChildAt to control the 'z' of your objects and avoid the issue.
Since the draw order is something that has to be handle at the stage, (not child), level, just have a look at the official documentation on Stage :
http://createjs.com/Docs/EaselJS/classes/Stage.html

putting d3.js elements on the slider

Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?

You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.