我无法在我的 js 文件中放置两个或更多 svg 形状并让它们显示在我的网站上

Question

当我在网络浏览器中打开我的 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');`

Answer 1

你在哪里：

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

您对 svg.append('rect') 中的字符串 'rect' 感到困惑。您不应将此 svg 引用为 rect。相反，您已将其设置为常量并将其命名为 leftEye，因此您应该将其引用为 leftEye：

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

rightEye 变量也是如此。

我无法在我的 js 文件中放置两个或更多 svg 形状并让它们显示在我的网站上

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

html

javascript

geometry

svg

shapes