Как добавить метку к выпуклому корпусу, созданному d3?

Question

Как добавить метку к выпуклому корпусу, созданному d3?

1

Я использовал d3 v4 и этот метод (слегка модифицированный), чтобы нарисовать выпуклую оболочку вокруг узлов в силовом графике. Отлично работает, но теперь я хочу обозначить эти группы узлов. В конечном счете, я хотел бы нарисовать что-то похожее на этот SVG. Можно ли добавить текстовый элемент в выпуклый нулевой многоугольник, чтобы он перемещался по мере перемещения многоугольника или мне нужно было создать отдельную группировку?

theory 28 нояб. 2017, в 22:13

Источник

Теги:

javascript

d3.js

svg

polygon

1 ответ

Ещё вопросы

Andrew Reid · Accepted Answer · 2017-11-29T02-24-00.000Z

Я бы подошел к такой проблеме:

Создайте выпуклый многоугольник корпуса из точек
Найдите центр тяжести этого многоугольника, используя d3.geom или d3.polygon (в зависимости от версии)
Обновите текст с этой новой координатой в центре

В d3 v4 это выглядит примерно так:

var polygon = d3.polygonHull(vertices);

Затем вы найдете центр тяжести:

var centroid = d3.polygonCentroid(polygon);

И обновите текст:

text.attr("transform","translate("+ centroid +")")

В d3v3 и v2 код может выглядеть по-другому:

var polygon = d3.geom.polygon(d3.geom.hull(vertices));
var centroid = polygon.centroid();
text.attr("transform","translate("+centroid+")");

Что касается обновления нескольких текстов сразу, есть куча потенциальных методов для этого, поэтому я не буду говорить с ним здесь.

Здесь приведен пример одного текстового элемента, обновляемого в v4.