Learn About SVG in D3 helppp

JavaScript
1

is it creating multiple svg elements?

Your code so far


<style>
  svg {
    background-color: pink;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body").selectAll('svg')
                  // Add your code below this line
                  .data(dataset)
                  .enter()
                  .append('svg')
                  .attr('height',h)
                  .attr('width',w)
                  
                  
                  
                  // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/learn-about-svg-in-d3

2

One for each element of the array I think^^
When you say d3.select('body').selectAll('svg') you are selecting all the svg elements in the body (0) preparing them to hold the data you’re sending to.
Since they are 0 you will create a new element for each element of the dataset passed in, and those elements will be svg ( from append('svg'))

This as far as i remember, but I’m not 100% sure :confused:

3

Yes it is creating multiple SVGs.
To solve this problem use the following code. It avoids creating multiple SVGs. Adding a border color will help you see when multiple SVGs are created.

<style>
  svg {
    background-color: pink;
    border: 1px solid red;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    const w = 500;
    const h = 100;
    
    const svg = d3.select("body")
                  // Add your code below this line
                  svg
                  .append("svg")
                  .attr("height", h)
                  .attr("width", w)
                  
                  
                  // Add your code above this line
  </script>
</body>

This will then create only one SVG and you will pass the test.