Menu
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?
867
D3. js is easy to use.
To begin using D3 you'll need to be familiar with JavaScript, CSS, method chaining, SVG. Plus you'll need a basic understanding of the DOM. JavaScript or Block Programming: While it's not necessary to know JavaScript, being familiar with a block style programming language is necessary.
The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.
You need to actually select the svg element first before using svg.selectAll.
var svg = d3.select(document.getElementById('sampleSVGId')),
circle = svg.selectAll('circle');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
