CODEWITHSUNDEEP
javascripthtmlsvggeometryshapes
Rouba
Rouba

Reputation: 59

I can't put two or more svg shapes in my js file and have them show on my website

When I open my html page in a web browser I only can see the first shape in this list, the other shapes don't appear as if there was no code for them. I wrote the code in two separate files, an html file and a js file. Can anyone tell me please if there is something missing in my code that is causing that issue to occur. Code in my html file: ` Let's make a face with D3.js 

  </head>
  <body>
  <svg width="1000" height="500"></svg>

  <script src="bundle.js">
  </script>

  </body>
  </html>`

Code in my js file :

`(function () {
'use strict';

const svg = d3.select('svg');
svg.style('background-color','red');
const height = parseFloat(svg.attr('height'));
const width= +svg.attr('width');

const circle = svg.append('circle');
circle.attr('r', height / 2);
circle.attr('cx', width/2);
circle.attr('cy', height/2);
circle.attr('fill', '#FFFFFF');
circle.attr('stroke', 'green');

const leftEye = svg.append('rect');
rect.attr('x', width/2);
rect.attr('y', height/2);
rect.attr('fill', '#000000');
rect.attr('stroke', 'green');

const rightEye = svg.append('circle');
circle.attr('r', 30);
circle.attr('cx', 600);
circle.attr('cy', height/2);
circle.attr('fill', '#FFFFFF');
circle.attr('stroke', 'green');`

Upvotes: 1

Views: 59

Answers (1)

Andrew
Andrew

Reputation: 776

Where you have:

rect.attr('x', width/2);

You're confused about the string 'rect' within svg.append('rect'). You shouldn't reference this svg as rect. Rather, you've set it to a constant and named it leftEye, so you should reference it as leftEye instead:

leftEye.attr('x', width/2);

And the same goes for the rightEye variable.

Upvotes: 2

Related Questions