Come aggiungere un suggerimento a un grafico svg?

Ho una serie di rettangoli SVG (utilizzando d3.js) e voglio visualizzare un messaggio al passaggio del mouse, il messaggio deve essere circondato da una scatola che funge da sfondo. Dovrebbero entrambi essere perfettamente allineati l'uno con l'altro e con il rettangolo (in alto e al centro). Qual è il modo migliore per farlo?Come aggiungere un suggerimento a un grafico svg?

Ho provato ad aggiungere un testo SVG utilizzando il "x", "y", "larghezza" e "altezza" attributi, e quindi prepending uno SVG rect. Il problema è che il punto di riferimento per il testo si trova nel mezzo (perché voglio centrato allineato ho usato text-anchor: middle), ma per il rettangolo è coordinata in alto a sinistra, in più ho voluto un po 'di margine intorno al testo che lo rende genere di un dolore.

L'altra opzione utilizzava un div html, che sarebbe bello, perché posso aggiungere direttamente il testo e il padding, ma non so come ottenere le coordinate assolute per ogni rettangolo. C'è un modo per fare questo?

fonte

2012-05-17 nachocab

Se non c'è altro modo, credo – nachocab

è che un problema , usando il markup per quello per cui è stato progettato? – Phrogz

È solo che non sembra bello, ma apprezzo la tua risposta – nachocab

È possibile utilizzare l'elemento titolo come Phrogz indicato. Ci sono anche alcuni buoni tooltip come Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (che può essere utilizzato per sostituire tutti gli elementi del titolo), nvd3 di Bob Monteverde di jQuery o anche tooltip del Twitter dalla loro Bootstrap http://twitter.github.com/bootstrap/

fonte

2012-05-17 21:06:19 paxRoman

si può utilizzare semplicemente il browser SVG <title> element e il rendering predefinito che veicola? (Nota: questo è non lo stesso del title attributo che si può usare su div/img/campate in html, ha bisogno di essere un bambino elemento chiamato title)

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p> 
 

 
<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect> 
 
    <title>Hello, World!</title> 
 
    </rect> 
 
</svg>

in alternativa, se si vuole veramente mostrare HTML nel formato SVG, è possibile incorporare codice HTML direttamente:

rect { 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #69c; 
 
    stroke: #069; 
 
    stroke-width: 5px; 
 
    opacity: 0.5 
 
} 
 

 
foreignObject { 
 
    width: 100%; 
 
} 
 

 
svg div { 
 
    text-align: center; 
 
    line-height: 150px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect/> 
 
    <foreignObject> 
 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
 
     <div> 
 
     Hello, <b>World</b>! 
 
     </div> 
 
    </body>  
 
    </foreignObject> 
 
</svg>

... ma poi avresti bisogno di JS per accendere e spegnere il display. Come mostrato sopra, un modo per far apparire l'etichetta nel punto giusto è avvolgere il rect e l'HTML nello stesso <g> che li posiziona entrambi insieme.

Per usare JS per trovare dove un elemento SVG è sullo schermo, è possibile utilizzare getBoundingClientRect(), per esempio http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

fonte

2012-05-17 21:06:16 Phrogz

Funziona bene per me per inserire il titolo in un elemento svg! –

Bella risposta. Ma tieni presente che 'foreignObject' [non è supportato in Internet Explorer] (https://caniuse.com/#search=foreignObject) –

Come aggiungere un suggerimento a un grafico svg?

risposta

Problemi correlati