{
const r = (space / 2) - 50;
const svg = d3.create('svg')
.attr('width',space)
.attr('height',space);
const g = svg.append('g')
.attr('transform',`translate(${space/2},${space/2})`);
g.append("circle").
attr('cx',0).
attr('cy',0).
attr("r",r)
.attr('fill','none')
.attr('stroke','gray');
g.selectAll(".axis").
data(anchor_points)
.join('circle')
.attr('cx',d=>d.x*r)
.attr('cy',d=>d.y*r)
.attr('r',10).attr('fill','red');
const datag = svg.append('g').attr('transform',`translate(${space/2},${space/2})`);
datag.selectAll('.dot')
.data(data).
join("circle").
attr('class','dot')
.attr('cx',d=>r*d.x)
.attr('cy',d=>r*d.y)
.attr('r',4)
.attr('fill',d=>color(d.class))
.on("mouseenter", mouseEnter)
.on("mouseleave", mouseLeave)
.attr('stroke','white');
const tooltip = svg.append('g')
.attr('visibility', 'hidden');
const tooltipHeight = 2;
const tooltipRect = tooltip.append('rect')
.attr('fill', 'black')
.attr('rx', 5)
.attr('height', tooltipHeight);
const tooltipText = tooltip.append('text')
.attr('fill', 'red')
.attr('font-family', 'sans-serif')
.attr('font-size', 12)
.attr('y', 6)
.attr('x', 7)
.attr('dominant-baseline', 'hanging');
function mouseEnter(event, d) {
console.log(d)
d3.select(this)
.attr('r', 4 * 2);
tooltipText.text(d.class);
const labelWidth = tooltipText.node().getComputedTextLength();
tooltipRect.attr('width', labelWidth + 6);
const xPos = d.x ;
const yPos = d.y ;
tooltip.attr('transform', `translate(${xPos},${yPos})`)
.attr('visibility', 'visible');
}
function mouseLeave(event, d) {
d3.select(this)
.attr('r', 4)
tooltip
.attr('visibility', 'hidden');
}
return svg.node()
}