d3.js: dodaj rozpiętość z klasą glyphicon

Question

Poniższy fragment kodu działa poprawnie. To przyciąga mnie do koła. Co chcę jest, że wewnątrz tego okręgu narysować bootstrap glyphicon: <span class="glyphicon glyphicon-zoom-in"></span>

d3.json("relations", function(error, graph) { 
    var links = svg.selectAll() 
     .data(graph.links).enter(); 

    links   
     .append("circle") 
     .attr("class", "circle") 
     .attr("r", circle_r) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 

Próbowałem zrobić wykonaj następujące czynności ciągłej poprzedni kod:

links .append("span") .attr("class", "glyphicon glyphicon-zoom-in")

ale symbol nie czyni . Sądzę, że jest coś w pozycjonowaniu tego, ponieważ z firebugem/inspektorem mogę zobaczyć rozliczenie <span>.

Czy ktoś wie, jak to zrobić? Dzięki

Answer 1

Dostałem to do pracy poprzez dodanie glyphicons tak:

link.append("svg:foreignObject") 
    .attr("width", 20) 
    .attr("height", 20) 
    .attr("y", "-7px") 
    .attr("x", "-7px") 
    .append("xhtml:span") 
    .attr("class", "control glyphicon glyphicon-zoom-in"); 

A dokonując stanowisko .glyphicon dydaktycznego statyczny:

.control.glyphicon { 
    position: static; 
} 

Plnkr example here