1

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');`
Rouba
  • 59
  • 2
  • 10
  • `rect !== leftEye`, `circle !== rightEye` -> voting to close as typo – Andreas Nov 08 '19 at 15:43
  • 1
    @Andrew: And you know why exactly that this is my DV? New member or not, this type of problem won't help future readers hence there's a close option for this exact type of problem ([#2 in the list](https://stackoverflow.com/help/on-topic)). Feel free to flag my comment if you think this will change anything. – Andreas Nov 08 '19 at 15:51

1 Answers1

2

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.

Andrew
  • 763
  • 7
  • 21