Geek Answers Handbook

Changing SVG to HTML with d3

This is my first post, so I will try to make sure that I observe the appropriate etiquette.

I have no experience with html, d3 or javascript. However, I have some impact on xml and svg. I am trying to complete this lesson: [ http://bost.ocks.org/mike/circles/] . I spent several hours yesterday fruitlessly trying to complete the first step, which is to change the color and radius of the three circles using d3.selectAll (). I read a few posts here and looked at other lessons, but I can’t let life make me circle blue. Unfortunately, the textbook never displays all of their code. I was able to display three black circles (the original svg) in my browser, but it seems I can not get d3 to select them and make changes. I'm not even sure if xml is embedded in html, or if it is external and read in some way.

Can someone post an html that you would use for this? Any help 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);
+5
source share
2 answers

Your code is correct. I assume that you are not collecting it correctly. Here is 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>
+1
source

Your code looks good, there must be another problem. Take a look at this fiddle to demonstrate what is going to happen. Ignore the transition / duration / delay to simply slow down everything so that it is easily visible.

http://jsfiddle.net/s6u5my8k/

 var circle = d3.selectAll('circle') .transition().duration(750).delay(750) .style('fill', 'steelblue') .attr('r', 30);
+1
source

More articles:


All Articles