Как обрабатывать несколько элементов в SVG с помощью D3. js

Question

У меня несколько элементов в SVG.

<svg width=200 height=200>
<g id='a'>
  <circle cx=40 cy=30 r=15></circle>
  <rect x=60 y=20 width=40 height=20></rect>
</g>
<g id='b'>
  <circle cx=40 cy=90 r=15></circle>
</g>
</svg>

Моя цель - выбрать элементы в D3 и изменить цвет. например, из круга, как золото, и круга из b, как зеленого, и прямоугольника из b, как синего.

Answer 1

Если вам нужно сделать это динамически, а не просто устанавливать атрибут fill каждого элемента напрямую, вы можете использовать d3.select для выбора элементов, а затем selection.attr, чтобы изменить их fill.

Вот рабочий пример:

const svg = d3.select('svg');
svg.select('g#a circle').attr('fill', 'gold');
svg.select('g#a rect').attr('fill', 'blue');
svg.select('g#b circle').attr('fill', 'green');

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width=200 height=200>
<g id='a'>
  <circle cx=40 cy=30 r=15></circle>
  <rect x=60 y=20 width=40 height=20></rect>
</g>
<g id='b'>
  <circle cx=40 cy=90 r=15></circle>
</g>
</svg>

Обратите внимание, что в исходном примере нет <rect> в <g id='b'>, поэтому в этом примере просто заменяется <rect> в <g id='a'>.