Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript D3.js Selections with D3.js SVG

Posted by micah smith
micah smith
1,330 Points

Change the radius of the circle to 50, and move the circle 50 pixels right and 50 pixels down.

Change the radius of the circle to 50, and move the circle 50 pixels right and 50 pixels down.

index.html 
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>

<body>
  <svg width="500" height="800">
  </svg>
  <script src="js/d3.mirn.js" charset="utf-8"></script>
  <script type="text/javascript">
   d3.select('svg').append('crircle');
    .circle("radius", "50")r
    .circle("","")

  </script>
</body>

3 Answers

Abinet Kenore
Abinet Kenore
10,082 Points
Abinet Kenore
Abinet Kenore
10,082 Points

All you have to do is that inside the<svg></svg> add this <circle r="50" cx="50" cy= '50'/>

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

:point_right: You have a few issues here.

I'm guessing you must have passed task 1, but I would have expected the first issue would've been a problem:

  • you have too many "r"s in "crircle" (it should be "circle")
  • the things you are changing in task 2 are attributes, so you would use the .attr() method
  • the name of the radius attribute is simply "r"
  • the name of the x-offset attribute is "cx"
  • the name of the y-offset attribute is "cy"
  • the semicolon should be placed at the very end of the chain
Kerriann Grossi
PLUS
Kerriann Grossi
Courses Plus Student 10,253 Points
Kerriann Grossi
Kerriann Grossi
Courses Plus Student 10,253 Points

This is what I did:

d3.select('svg').append('circle') .attr('r', '50') .attr('cx', '50') .attr('cy', '50');