D3.js: Umieszczanie podpowiedzi za pomocą pozycji elementu, a nie pozycji myszy?

Używam D3 do rysowania wykresu punktowego. Chciałbym pokazać podpowiedzi, gdy użytkownik myszkuje nad każdym okręgiem.D3.js: Umieszczanie podpowiedzi za pomocą pozycji elementu, a nie pozycji myszy?

Moim problemem jest to, że mogę dołączyć podpowiedzi, ale są przy wykorzystaniu wskazanego zdarzenia myszy d3.event.pageX i d3.event.pageY, więc nie są one umieszczone konsekwentnie nad każdym okręgu.

Zamiast tego, niektóre są nieco na lewo od koła, inne po prawej - zależy to od tego, w jaki sposób mysz użytkownika wchodzi w okrąg.

To jest mój kod:

circles 
    .on("mouseover", function(d) {   
    tooltip.html(d) 
     .style("left", (d3.event.pageX) + "px")  
     .style("top", (d3.event.pageY - 28) + "px");  
    })     
    .on("mouseout", function(d) {  
    tooltip.transition().duration(500).style("opacity", 0); 
    });

i jest JSFiddle pokazujący problem: http://jsfiddle.net/WLYUY/5/

Czy jest jakiś sposób mogę korzystać z centrum samego okręgu jako pozycja do zorientowania podpowiedź, nie pozycja myszy?

Źródło

2013-04-27 Richard

Jeśli jesteś ok z wszelkiego rodzaju podpowiedzi, [ta odpowiedź] (http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220# 10806220) powinien pomóc. –

Dzięki! Wolałbym używać czystych podpowiedzi D3 niż podpowiedzi, jeśli to możliwe. – Richard

W danym przypadku można po prostu użyć d aby umieścić etykietkę, czyli

tooltip.html(d) 
    .style("left", d + "px")  
    .style("top", d + "px");

Aby to nieco bardziej ogólnie, można wybrać element, który jest moused nad i dostać swoje współrzędne położenia tooltip, tj

tooltip.html(d) 
    .style("left", d3.select(this).attr("cx") + "px")  
    .style("top", d3.select(this).attr("cy") + "px");

Źródło

2013-04-27 20:55:24

Dzięki - obawiam się, że użycie 'd3.select (this) .attr (" cx ")' działa tylko wtedy, gdy elementy '' i ' Richard

Jeśli masz inne treści, musisz dodać przesunięcie SVG do pozycji, zobacz http://jsfiddle.net/WLYUY/7/ –

Rozwiązanie z offset zadziałał dla mnie. Dzięki Lars. Teraz używam wizualizacji w siatce kolumn początkowych, ale nowe pozycjonowanie nie ma wpływu na przesunięcie. Jak mogę to naprawić? –

znalazł coś here które mogłyby rozwiązać problem, nawet jeśli <body> i <svg> mieć inną pozycję. Zakłada to, że ustawiłeś pozycję absolute dla swojej podpowiedzi.

.on("mouseover", function(d) { 
    var matrix = this.getScreenCTM() 
     .translate(+ this.getAttribute("cx"), + this.getAttribute("cy")); 
    tooltip.html(d) 
     .style("left", (window.pageXOffset + matrix.e + 15) + "px") 
     .style("top", (window.pageYOffset + matrix.f - 30) + "px"); 
})

Źródło

2014-06-04 15:48:57 Boxuan

świetnie. To bardzo mi pomogło ... –

Właśnie tego potrzebowałem. Dzięki! –

Jestem nowy D3 więc to nie może pracować dla rozrzutu ... ale okazało się, że wydaje się działać na wykresach słupkowych ... gdzie v1 i v2 są wartościami są wykreślone .. i wydaje wyszukaj wartość z tablicy danych.

.on("mouseover", function(d) { 
        divt .transition() 
         .duration(200) 
         .style("opacity", .9); 
        divt .html(d.v1) 
         .style("left", x(d.v2)+50 + "px") 
         .style("top",y(d.v1)+ "px");})

Źródło

2016-02-07 00:36:10 timemirror

D3.js: Umieszczanie podpowiedzi za pomocą pozycji elementu, a nie pozycji myszy?

Odpowiedz

Powiązane problemy