So I'm just starting d3.js and I keep getting a JavaScript error and I've no idea why. I've just created three circles with svg and want to select them with d3. Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src=".v3.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<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>
<circle class="little" cx="300" cy="135" r="12"></circle>
</svg>
<script type="text/javascript">
var circle = svg.selectAll("circle");
</script>
</body>
</html>
This is supposed to select the circles on the page so I can manipulate them but I keep getting a reference error in my Web Console that says svg is not defined? But the introductory tutorial doesn't say anything about defining svg?
So I'm just starting d3.js and I keep getting a JavaScript error and I've no idea why. I've just created three circles with svg and want to select them with d3. Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://d3js/d3.v3.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<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>
<circle class="little" cx="300" cy="135" r="12"></circle>
</svg>
<script type="text/javascript">
var circle = svg.selectAll("circle");
</script>
</body>
</html>
This is supposed to select the circles on the page so I can manipulate them but I keep getting a reference error in my Web Console that says svg is not defined? But the introductory tutorial doesn't say anything about defining svg?
Share Improve this question asked Mar 26, 2013 at 17:45 aaduaadu 3,25410 gold badges42 silver badges65 bronze badges 4- Which tutorial are you following? – Felix Kling Commented Mar 26, 2013 at 17:46
- This one: mbostock.github./d3/tutorial/circle.html – aadu Commented Mar 26, 2013 at 18:01
- Yeah, he really doesn't mention it, at least not explicitly, not even in the introduction. What I found helpful in these situations is having a look at the page source and check the actual code. – Felix Kling Commented Mar 26, 2013 at 18:30
- Yeah, I was doing that but was still getting a bit lost unfortunately. – aadu Commented Mar 27, 2013 at 11:58
1 Answer
Reset to default 8You need to actually select the svg element first before using svg.selectAll.
var svg = d3.select(document.getElementById('sampleSVGId')),
circle = svg.selectAll('circle');