Mam stronę internetową z SVG. Na niektórych jego kształtach muszę wyświetlić podpowiedź. Jednak nie mogę uzyskać podpowiedzi, aby pojawiła się tam, gdzie powinna, tylko kilka pikseli od samego kształtu.

Pojawia się po prawej stronie ekranu, może około 300 pikseli. Kod, którego używam do uzyskania współrzędnych, jest następujący:

d3.select("body")
  .select("svg")
  .select("g")
  .selectAll("circle")
  .on("mouseover", function(){return tooltip.style("visibility", "visible");})
  .on("mousemove", function(){

var svgPos = $('svg').offset(),

/*** Tooltip ***/

//This should be the correct one, but is displaying at all working at all.
/*x = svgPos.left + d3.event.target.cx.animVal.value,
y = svgPos.top + d3.event.target.cy.animVal.value;*/


//This displays a tool tip but way much to the left of the screen.
x = svgPos.left + d3.event.target.cx.animVal.value,
y = svgPos.top + d3.event.target.cy.animVal.value;

Tooltip
window.alert("svgPos: "+svgPos+"        top: "+y+"px          left: "+x+"px     "+d3.event.target.cx.animVal.value);


return tooltip.style("top", x+"px").style("left",y+"px");
})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Mam następujący kodten post SO.

Zmieniłem $ (ev.target) .attr (cx), ponieważ nie zwraca on wartości na moim komputerze; d3.event.target.cx jest, mimo że wydaje się, że i tak nie wpływa na wynik końcowy.

Co ja robię źle? Czy ktoś mógłby mi pomóc? Z góry dziękuję za poświęcony czas.