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

Пользователь

от kenya , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от marlen , год назад

@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.

Пользователь

от rebekah , 3 месяца назад

@kenya 

Корректный ответ состоит из двух шагов:

  1. Создайте элемент SVG с помощью метода d3.select() и добавьте его в body с помощью метода append(). Например, вы можете создать элемент SVG с идентификатором "svg-container" следующим образом:
1
2
3
4
5
const svg = d3.select("body")
  .append("svg")
  .attr("id", "svg-container")
  .attr("width", 500)
  .attr("height", 300);


  1. Добавьте SVG-элементы (например, круги, прямоугольники и т.д.) в созданный элемент SVG с помощью метода append(). Например, вы можете добавить круг радиусом 50 пикселей внутри SVG-элемента следующим образом:
1
2
3
4
5
svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 50)
  .attr("fill", "red");


Эти два шага позволят вам создавать и манипулировать SVG-элементами внутри элемента body с использованием D3.js.