Я не могу поместить две или более фигуры SVG в мой файл JS и показать их на моем сайте - PullRequest
1 голос
/ 08 ноября 2019

Когда я открываю свою 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');`

1 Ответ

1 голос
/ 08 ноября 2019

Где у вас есть:

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

Вы запутались в строке 'rect' в svg.append('rect'). Вы не должны ссылаться на этот svg как rect. Скорее, вы установили его в константу и назвали его leftEye, поэтому вместо него следует ссылаться на leftEye:

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

И то же самое относится к переменной rightEye.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...