CODEWITHSUNDEEP
javascriptd3.jsd3plus
Xnn04
Xnn04

Reputation: 91

D3 plus wrapping text in circles

So I've been trying to use D3plus in order to wrap text inside circles but with no success. In my application I have a few circle/text pairs, put together into a "g" element. In my code, after I create the "g" elements and append circles and text to it I call the d3plus d3plus.textwrap()function like this:

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

However, instead of getting wrapped, the text simply disappears. The text is still visible as an element in DOM, but for some reason its size becomes 0x0. Does anyone know what is wrong here?

Upvotes: 2

Views: 1172

Answers (1)

Satish Patel
Satish Patel

Reputation: 1844

Use method resize as true as following 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>

Upvotes: 3

Related Questions