Как совместить svg и body в d3.js?

@kenya 

D3.js позволяет создавать и манипулировать SVG-элементами внутри HTML-документа, в том числе внутри элемента body. Для того чтобы совместить SVG и body в D3.js, необходимо выполнить следующие шаги:

1. Создать элемент SVG с помощью метода d3.create(). Например, можно создать элемент SVG с шириной 500 пикселей и высотой 300 пикселей следующим образом:

1
2
3

const svg = d3.create("svg")
  .attr("width", 500)
  .attr("height", 300);

1. Добавить созданный элемент SVG в body с помощью метода d3.select(). Например, можно добавить элемент SVG в конец body следующим образом:

1
2

d3.select("body")
  .append(() => svg.node());

1. Добавить SVG-элементы в созданный элемент SVG с помощью метода svg.append(). Например, можно добавить прямоугольник внутри SVG-элемента следующим образом:

1
2
3
4
5
6

svg.append("rect")
  .attr("x", 10)
  .attr("y", 10)
  .attr("width", 100)
  .attr("height", 50)
  .attr("fill", "blue");

Таким образом, можно создать и манипулировать SVG-элементами внутри HTML-документа, используя D3.js.