We Keep Coding

Js How to draw line to edge of circle?

I'm having issues, drawing lines between two circles.
The main issue is that the lines are drawn to the square of the div, not the circle defined with border-radius.
In the code pen below you can see box E is square and the line goes all the way, however, with circle F it does not reach.
It seems if the div aligns with the x or y the gap is less than say directly in a corner.
https://codepen.io/crankd-media/pen/poebQGM
var c1 = new Connector(
{
ele1: start,
ele2: end,
}
);
The line is going to the square of the div, not the circle radius:
The circle will also need to be transparent so can't go to the middle.

How to shift the most inner rectangle inside the most outer rectangle

I'm working on centering the most inner (the red shape) on X-axis to the center of the most outer shape (the black shape), while the red shape keeps its coordinates/position inside its direct parent, i.e. the blue shape.
For example, centering the red shape from this original image (dimensions are shown on the second picture):
should look like that:
Additionally, the blue shape can be anywhere inside black shape, and red anywhere inside blue.
It's basic math :) and I'm having troubles with coming up with a general math formula on how to center the red shape inside the dark one while maintaining its position inside the blue shape. Could somebody direct or explain me how to do this?
NOTE the values (widths) are in pixels and are not accurate.

Just store the distance between the red box and its parent, center the red box and then change the parent by using the stored distance:
let distance = red.x - redParent.x; // storing the distances between the red box and its parent
red.x = black.x + black.width / 2 - red.width / 2; // centering the red box horizontally according to the black box
redParent.x = red.x - distance; // changing the red box parent position accordingly

How to selectively pass mouse events to underlying svg elements

I have a scatterplot with a brush layer for zooming in the data and voronois for mouse hover snapping but the problem is that the voronoi paths don't let the click event fall through to brush layer or if keeping brush on top it doesn't allow hover event to fall through to voronoi layer
Brush layer needs click event
Voronoi layer needs hover event
How should I go about the setup, css only solutions preferable
keeping brush layer on top :
keeping voronoi layer on top :

I did this on voronoi hover keeping brush on bottom, but it flickers arround the edges
$("#visualization-main-container > svg > g.voronoiWrapper > path.voronoi-poly").css("pointer-events", "all");
setTimeout(function() {
$("#visualization-main-container > svg > g.voronoiWrapper > path.voronoi-poly.voronoi-movie-id-" + d.id).css("pointer-events", "none");
}, 10);
EDIT :
I finally end up using a hotkey "CTRL" to temporarily disable mouse events on voronoi layer when it is pressed down, it adds an extra step to the zoom process but it is much more smooth.

Jsxgraph circle dragging of its body area

I am new to JsxGraph. My usecase is to drag circle with its body or area, that is dragging from inside of its Circumference or area. I found all of jsxgraph Circle event like drag, mousedown etc,work only when we click over its Circumference border and do not fire when click inside the circle.
Can anyone point me in the right direction?

Circles can be constructed with the attribute hasInnerPoints which does exactly this.
Example:
var circ = board.create('circle', [...], {hasInnerPoints: true});

d3 brush: not a rectangle but a circle?

We wish to use a d3 brush to select neighobrs in a scatter plot. For this, a circle is more natural than a rectangle. I imagine a sequence of actions:
1) set the circle's center with a mouse click
2) adjust the radius with mouse motion, the x & y components of the current mouse position perhaps even implying an ellipse
In all the examples my web search finds, the brushed region is a rectangle.
Any advice, or working examples?
Thanks!
Puaul