如何使用 D3.js 处理 SVG 中的多个元素

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>

我的目标是 select D3 中的元素并更改颜色。 就像从一个圆形的金色和圆形从 b 作为绿色和矩形从 b 作为蓝色。

Answer 1

如果您需要动态执行此操作 - 而不是直接设置每个元素的fill属性 - 那么您可以使用d3.select到 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>

请注意，原始示例中的<g id='b'>中没有<rect> ，因此此示例仅更改了<g id='a'> <rect>