Как нарисовать дугу по трём точкам с помощью d3.js?

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

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

Как нарисовать дугу по трём точкам с помощью d3.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от alisa.bahringer , год назад

@kennedi_pfeffer 

В D3.js есть встроенные методы для рисования дуг. Вы можете использовать метод d3.arc() чтобы создать дугу по трем точкам.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var arc = d3.arc()
    .innerRadius(100)
    .outerRadius(150)
    .startAngle(0)
    .endAngle(Math.PI / 2);

var svg = d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 300);

var path = svg.append("path")
    .attr("d", arc)
    .attr("transform", "translate(150,150)");


В этом примере мы создаем дугу с внутренним радиусом 100 и внешним радиусом 150. Угол начала дуги равен 0, а конечный угол равен Math.PI / 2 (одна половина радиана). Мы также преобразуем дугу, чтобы ее центр совпадал с центром SVG.

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

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

@kennedi_pfeffer 

Важно отметить, что в приведенном примере значения радиусов и углов заданы вручную. Вы также можете использовать данные точек для вычисления радиусов и углов дуги.