Изменение цвета объектов SVG в D3

Question

У меня есть указанные ниже объекты в SVG, и я хочу изменить цвет в D3

<svg width=100 height=100>
<circle cx=10 cy=30 r=15></circle>
<circle cx=60 cy=30 r=15></circle>
<rect x=10 y=80 width=60 height=10></rect>
</svg>

Я хочу сделать 1-й круг зеленым, 2-й - розовым и прямоугольник - золотым.

Answer 1

Один типичный способ сделать это в d3 (документы, управляемые данными) будет выглядеть так:

(Начните со структуры данных и управляйте DOM из нее, используя d3)

const myShapes = [
  {shape: "circle", cx: 10, cy: 30, r: 15, fill: "green"}, //<circle cx=10 cy=30 r=15 fill='green'></circle>
  {shape: "circle", cx: 60, cy: 30, r: 15, fill: "pink"}, //<circle cx=60 cy=30 r=15 fill='pink'></circle>
  {shape: "rect", x: 10, y: 80, width: 60, height: 10, fill: "gold"} //<rect x=10 y=80 width=60 height=10 fill='gold'></rect>
];

const svg = d3.select('svg')

svg.selectAll('.shape')
  .data(myShapes)
  .enter()
  //.append('g') //you could surround each element in a group
  .append(d => document.createElementNS('http://www.w3.org/2000/svg', d.shape)) //d3.creator(d.shape)
  .attr('class', d => d.shape)
  .attrs(d => {
    //console.log(d)
    const copy = {...d}
    delete copy.shape
    return copy
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js">
</script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js">
</script>
<svg width="100%" viewbox="0 0 200 200">

</svg>

Вывод:

введите описание изображения здесь