CODEWITHSUNDEEP
javascripthtmlsvgd3.js
aadu
aadu

Reputation: 3254

trouble with introduction to d3.js

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.org/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?

Upvotes: 5

Views: 4055

Answers (1)

Vinay
Vinay

Reputation: 6342

You need to actually select the svg element first before using svg.selectAll.

var svg = d3.select(document.getElementById('sampleSVGId')),
    circle = svg.selectAll('circle');

Upvotes: 8

Related Questions