Modifying an SVG in HTML using d3
Question
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);
2 answers
solution1
1 ACCPTED 2015-07-21 16:28:44
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="d3@3.5.3" 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>
solution2
1 2015-07-21 16:31:29
Your code looks good, there must be another issue. Take a look at this fiddle to demonstrate what should happen. Ignore the transition/duration/delay, that's just to slow everything down so it's easily visible.
var circle = d3.selectAll('circle')
.transition().duration(750).delay(750)
.style('fill', 'steelblue')
.attr('r', 30);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.