Мой план состоит в том, чтобы нарисовать 95-процентный эллипс на моем базовом графике рассеяния d3.Сначала я думал, что будет очень легко нарисовать доверительный эллипс в D3, потому что есть специальный SVG-эллипс, с которым можно работать.Однако все оказалось трудным, так как я мог создавать только эллипсы, ориентированные по оси.Хотя это и не ракетостроение, математика для определения правильной ориентации эллипса все еще несколько сложна.К счастью, я нашел это замечательное руководство о том, как рассчитать, а также эту справочную картинку:
Я хотел сделать шаги ребенкаво-первых, я на мгновение оставил в стороне математику и просто попытался навести эллипс на график рассеяния следующим образом:
graphGroupG.append('ellipse')
.attr('transform', 'translate(' + margins.left + ',' + margins.top + ')')
.attr({cx:xScale(0), cy:yScale(0), rx:xScale(-6), ry:yScale(6)})
.attr('stroke', 'black')
.attr('stroke-width', 3)
.attr('fill', 'none');
И несмотря на то, что он повозился со всеми cx, cy, rx, ry комбинаций, все мои эллипсы были выровнены по оси и не ориентированы по диагонали, как это требовалось бы, чтобы служить надлежащим доверительным эллипсом.Интересно, есть ли какой-нибудь секретный атрибут orientation, о котором я не знаю.
Вопрос: Как я могу использовать d3 ellipse svg, чтобы я мог установить эллипс .attr() с необходимыми доверительными координатами эллипса (подразумевая диагональную ориентацию).Если выделенная форма эллипса не работает, будет ли жизнеспособным подход path?
Буду признателен за вантуз или блок для доказательства концепции.Я посмотрел повсюду и ничего подобного не нашел.