Question

I’ve been trying to learn D3, but I’ve been having trouble running the circle example.

http://mbostock.github.com/d3/tutorial/circle.html

I am just trying to run the step where the circles change colors and size.

All I did was copy and paste, the example but I don’t know how else to approach this

http://jsfiddle.net/NntGN/

I’ve been trying to work through the tutorial to resolve this issue :

http://jsfiddle.net/H2SKt/1/

If you look at the pie chart, the names are blocked out. What changes would I need to make such that all the labels are pointing toward the center of the pie chart and not blocking each other? I’ve been playing with the text anchor and feel that its my best bet, but I’m not making any progress.

Thanks for any help 🙂

Answer 1

Well first of all you don’t have to copy the following html code to your site:

<svg width="360" height="180">
  <circle class="little" cx="180" cy="45" r="12"></circle>
  <circle class="little" cx="60" cy="90" r="12"></circle>
  ...
</svg>

That does d3.js for you. You just have to write the javascript code to select an svg element (or append one to your body for example) and to create the elements. Your code doesn’t work because svg is not defined.

Have a look at the section Creating Elements in the circle tutorial.

And last but not least here is the working jsfiddle.