Как отображать имена рядом с пузырьками в графике движения d3js

Question

В примере с Майком Бостоком http://bost.ocks.org/mike/nations/ так много данных, что размещение названий стран может привести к хаосу, но для небольшого проекта я бы хотел его отобразить.

Я нашел это в источнике:

var dot = svg.append("g")
  .attr("class", "dots")
.selectAll(".dot")
  .data(interpolateData(2004))
.enter().append("circle")
  .attr("class", "dot")
  .style("fill", function(d) { return color(d); })
  .text(function(d) { return d.name; })
  .call(position)
  .sort(order);

dot.append("title")
  .text(function(d) { return d.name; });

Но почему-то название никогда не появляется. У кого-нибудь есть идея, как отобразить имя рядом с пузырем?

Answer 1

К сожалению, объединение текста и кружков в этом случае не поможет. Пузыри перемещаются путем изменения их атрибутов положения (cx и cy), но элементы не имеют положений x и y для перемещения. Их можно перемещать только с помощью transform-translate. Смотрите: https://www.dashingd3js.com/svg-group-element-and-d3js

Ваши варианты здесь:

1) Перепишите функцию положения, чтобы вычислить разницу положения (изменение x и изменение y) между текущей позицией элемента и его новой позицией и примените ее к. ЭТО БЫЛО ОЧЕНЬ ТРУДНО.

или 2) Напишите параллельный набор инструкций для настройки и перемещения тегов. Что-то вроде:

var tag = svg.append("g")
  .attr("class", "tag")
.selectAll(".tag")
  .data(interpolateData(2004))
.enter().append("text")
  .attr("class", "tag")
  .attr("text-anchor", "left")
  .style("fill", function(d) { return color(d); })
  .text(function(d) { return d.name; })
  .call(tagposition)
  .sort(order);

Вам понадобится отдельная функция тегирования, так как тексту нужны атрибуты 'x' и 'y' вместо атрибутов 'cx', 'cy' и 'r'. Не забудьте обновить функцию "displayYear", чтобы изменить положение тега. Возможно, вы захотите сместить текст из пузырьков, но убедиться, что текст не перекрывается, является гораздо более сложной проблемой: http://bl.ocks.org/thudfactor/6688739

PS - Я назвал их тегами, так как "label" уже что-то означает в этом примере.

Answer 2

Как подсказывает другой ответ, вам нужно сгруппировать элементы. Кроме того, вам нужно добавить text элемент - title элемент отображается только как всплывающая подсказка в SVG. Код, который вы ищете, будет выглядеть примерно так.

var dot = svg.append("g")
             .attr("class", "dots")
             .selectAll(".dot")
             .data(interpolateData(2004))
             .enter()
             .append("g")
             .attr("class", "dot")
             .call(position)
             .sort(order);
dot.append("circle")
   .style("fill", function(d) { return color(d); });

dot.append("text")
   .attr("y", 10)
   .text(function(d) { return d.name; });

В призыве к position, вам нужно будет установить transform приписывать. Возможно, вам придется настроить координаты text элемент.

Answer 3

Вы должны обернуть элемент круга и текст вместе, это должно выглядеть

<country>
   <circle ></circle>
   <text></text>
</country>