JSFiddle - React, Tailwind, and code Playground

by Roman Zharikov

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg id="area" width="250" height="250"></svg>

JavaScript

var svg = d3.select("#area"), // выбираем контейнер svg
  line_1 = svg.append("line"), // вставляем линию
  line_2 = svg.append("line"),
  line_3 = svg.append("line"),
  circle = svg.append("circle"); // вставляем окружность

/* присваиваем атрибуты вновь добавленным элементам в контейнер svg */

line_1.attr("x1", "0")
  .attr("y1", "250")
  .attr("x2", "0")
  .attr("y2", "0")
  .attr("stroke-width", "1")
  .attr("stroke", "rgb(0,0,0)");
line_2.attr("x1", "0")
  .attr("y1", "250")
  .attr("x2", "250")
  .attr("y2", "250")
  .attr("stroke-width", "1")
  .attr("stroke", "rgb(0,0,0)");
line_3.attr("x1", "250")
  .attr("y1", "0")
  .attr("x2", "0")
  .attr("y2", "250")
  .attr("stroke-width", "1")
  .attr("stroke", "rgb(0,0,0)");
circle.attr("r", "50")
  .attr("cx", "125")
  .attr("cy", "125")
  .attr("fill", "rgb(200,200,200)");