当我在网络浏览器中打开html页面时，我只能看到此列表中的第一个形状，而其他形状则没有它们的代码。我在两个单独的文件（一个html文件和一个js文件）中编写了代码。任何人都可以告诉我，如果我的代码中缺少某些导致该问题发生的内容。我的html文件中的代码：`让我们面对D3.js
</head>
<body>
<svg width="1000" height="500"></svg>
<script src="bundle.js">
</script>
</body>
</html>`
我的js文件中的代码：
`(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');`
您在哪里：
rect.attr('x', width/2);
您对'rect'中的字符串svg.append('rect')感到困惑。您不应将此svg引用为rect。相反，您已将其设置为常量并将其命名为leftEye，因此应将其引用为leftEye：
leftEye.attr('x', width/2);
[rightEye变量也是如此。