Modifying an SVG in HTML using d3 Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Modifying an SVG in HTML using d3 without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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);

Answer

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>
We are here to answer your question about Modifying an SVG in HTML using d3 - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji