Menu
this is my first post so I'll try to make sure I'm following appropriate posting etiquette.
I have no experience whatsoever with html, d3, or javascript. I do however have some exposure to xml and svg. I'm trying to work through this tutorial: [http://bost.ocks.org/mike/circles/]. I spent several hours yesterday fruitlessly attempting to complete the first step, which is to change the color and radius of the three circles using d3.selectAll(). I've read through several posts on here and looked at other tutorials but I cannot for the life of me make the circles blue. Unfortunately the tutorial never shows the entirety of their code. I've been able to display the three black circles (original svg) in my browser but can't seem to get d3 to select them and carry out the changes. I'm not even sure if the xml is embedded within the html or if it is external and read in somehow.
Could someone post the html you would use to do this? Any assistance would be greatly appreciated.
Here is the xml corresponding to the circles:
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
And here is the code to make the changes:
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
860
Your code is correct. I'm guessing you aren't putting it together correctly. Here's the shortest example:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</body>
</html>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
