Динамически создавать прямоугольник внутри SVG на основе данных

Question

Я только начал изучать D3 и хотел создать динамически <rect> внутри SVG, который находится внутри div.

Это HTML:

<div class="canvas">
  <svg></svg>
</div>

И этоэто JS, который я пробовал:

var data = [
  {width: 300, height: 100, fill: 'purple'}
];
var c = d3.select('.canvas');
var r = c.select('svg').append('rect');//first creating an rect.
r.selectAll('rect').data(data)//then select whatever the rect i have inside svg
.enter().append('rect')
.attr('width', f=>f.width)
.attr('height', f=>f.height)
.attr('fill', f=>f.fill);

Он не показывает ошибок вообще.Я не знаю, где здесь настоящая ошибка.Искать везде, но не найти подходящего решения.

Answer 1

Ваш r выбор ...

var r = c.select('svg').append('rect');

... соответствует элементу <rect>. Из-за этого ваш выбор ввода ...

r.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  //etc...

... добавляет прямоугольник внутри другого прямоугольника:

<svg>
    <rect>
        <rect width="300" height="100" fill="purple"></rect>
    </rect>
</svg>

Это, конечно, не работает.

Следовательно, должно быть:

var r = c.select('svg').selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  //etc...

Вот ваш код с этим изменением:

var data = [{
  width: 300,
  height: 100,
  fill: 'purple'
}];
var c = d3.select('.canvas');
var r = c.select('svg').selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('width', f => f.width)
  .attr('height', f => f.height)
  .attr('fill', f => f.fill);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="canvas">
  <svg></svg>
</div>