D3JS плагин для переноса текста перезаписывается после обновления данных - PullRequest
Новая
       16

D3JS плагин для переноса текста перезаписывается после обновления данных

0 голосов
/ 15 октября 2018

Я использовал решение из принятого здесь ответа для переноса текста на древовидную диаграмму : перенос текста в D3

Тем не менее, когда я обновить данные , например: 

nodeUpdate
  .selectAll("text.nodeText")
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 100)
  .style("fill-opacity", 1);

эффект обертывания исчезает .

Что я делаю не так?

____ Изменить, чтобы показать больше кода ____

Каждый узел добавляется с обычной процедурой D3JS (ввод, обновление, выход).Проблема в том, что перенос обновленного текста не работает.

Таким образом, мы вводим узлы on: 

var nodeEnter = node
  .enter()
  .append("g")
  .call(dragListener)
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + source.y0 + "," + source.x0 + ")";
  })
  .on("click", click);

Мы добавляем элементы кузел, как и текст интереса: 

nodeEnter 
  .append("text")
  .attr("x", 5)
  .attr("dy", ".95em")
  .attr("class", "nodeText")
  .attr("text-anchor", "start")
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 150);

Обтекание работает нормально, если мы не обновим эти узлы.Но после обновлений, подобных этому ниже: 

var nodeUpdate = node
  .transition()
  .duration(duration)
  .attr("transform", function(d) {
    return "translate(" + d.y + "," + d.x + ")";
  });

nodeUpdate
  .selectAll("text.nodeText")
  .text(function(d) {
    return d.name;
  })
  .style("fill-opacity", 1)
  .call(wrap, 130);

Текст больше не вписывается в перенос. Функция переноса взята из описанного выше стекового потока, проверьте ссылку.

1 Ответ

0 голосов
/ 16 октября 2018

Я только что столкнулся с той же проблемой в другом месте.Это потому, что функция переноса текста не может действовать при переходе, она требует выделения.Чтобы исправить свой код, просто переместите текстовое дополнение и вызовы wrap до перехода: 

node
  .selectAll("text.nodeText")
  .text(function(d) {
    return d.name;
  })
  .call(wrap, 130);

var nodeUpdate = node
  .transition()
  .duration(duration)
  .attr("transform", function(d) {
    return "translate(" + d.y + "," + d.x + ")";
  });

nodeUpdate
  .selectAll("text.nodeText")
  .style("fill-opacity", 1)
...