d3js dodaj div

Próbowałem dodać kilka wyskakujących wiadomości obok węzła, ale wygląda jak wszystko inne niż tekst svg i obraz nie może być wyświetlany z dopiskiem.d3js dodaj div

node.append("text") 
     .attr("dx", 16) 
     .attr("dy", ".0em") 
     .text(function(d) { return d.name });

prace i dodaje tekst, ale starałem się dodać div i jej nie widać, node.append ("div"). Czy jest tu coś, czego mi brakuje? także jak mogę łatwo uzyskać położenie węzła, aby móc przenieść atrybuty na inny element.

Źródło

2012-07-04 BlitzCrank

Nie można umieszczać elementów HTML w dowolnym formacie SVG, należy zawrzeć je w elemencie foreignObject, patrz here. Jeśli umieścisz element text i foreignObject w grupie SVG (element g) i ustawisz w tym miejscu, oba elementy powinny pojawić się w tym samym miejscu, bez konieczności ustawiania tej samej pozycji w obu.

Źródło

2012-07-04 07:54:44

ok więc kwestia była kolejna rzecz, mam już grupy G i jeśli dodam element, którego nie trzeba ustawiać, więc jak mogę dołączyć div? Chcę zmodyfikować div później na wygląd, ale nie pokazuje się, jest niewidoczny – BlitzCrank

Jak już powiedziałem, musisz umieścić elementy HTML, takie jak "div", wewnątrz elementu "foreignObject". Powinieneś być w stanie wybrać i zmodyfikować jej atrybuty później za pomocą normalnych selektorów. –

svg.append ("foreignObject") .attr ("szerokość", 480) .attr ("wysokość", 500) .append ("xhtml: div") .style ("font", "14px" Helvetica Neue "") .html ("asd"); – BlitzCrank

Alternatywnie, możesz zdefiniować swój kod html poza svg w swoim własnym div. Następnie dołączyć zawartość przez klasy przy użyciu:

d3.select("#nytg-tooltip").style('top',ypos+"px").style('left',xpos+"px").style('display','block');

Jak widać na tym przykładzie:

http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html?_r=0

enter image description here

Źródło

2013-05-17 15:33:43 jonincanada

Tu jest dobry tutorial dla tej metody: http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html – Maggie

d3js dodaj div

Odpowiedz

Powiązane problemy