2016-08-14 3 views
1

Also habe ich versucht, D3plus zu verwenden, um Text in Kreisen zu kleben, aber ohne Erfolg. In meiner Anwendung habe ich einige Kreis-/Textpaare, die zu einem "g" -Element zusammengefügt sind. In meinem Code, nachdem ich die „g“ Elemente und fügen Sie Kreise und Text, um ihn zu erstellen nenne ich die d3plus d3plus.textwrap() Funktion wie folgt aus:D3 plus Text in Kreisen

d3plus.textwrap() 
    //selecting the first text element 
    .container(d3.select("#Text0")) 
    .draw(); 

Doch statt eingewickelt zu werden, wird der Text einfach verschwindet. Der Text ist immer noch als Element im DOM sichtbar, aber aus irgendeinem Grund wird seine Größe 0x0. Weiß jemand, was hier falsch ist?

+0

versuchen diesen Code 'd3plus.textwrap() Container (d3.select ("# Text0")) die Größe (true) .draw();.. ' –

Antwort

2

Verwenden Sie die Methode resize as true wie folgenden Code:

<!DOCTYPE html> 
<meta charset="utf-8"> 
<script src="//d3plus.org/js/d3.js"></script> 
<script src="//d3plus.org/js/d3plus.js"></script> 
<style> 
    svg {font-family:"Helvetica","Arial",sans-serif;height: 425px;margin: 25px; width: 400px;} 
    .type {fill: #888;text-anchor: middle;} 
    .shape {fill: #eee;stroke: #ccc;} 
</style> 
<svg> 
    <circle class="shape" r="85px" cx="275px" cy="300px"></circle> 
    <text id="circleResize" class="wrap" y="260px" x="200px" font-size="12"> 
Appeared Text inside circle </text> 
</svg> 
<script> 
    d3plus.textwrap() 
.container(d3.select("#circleResize")) 
.resize(true) 
.draw(); 
</script>