Повторная визуализация HTML после увеличения с помощью Dagre d3

Question

Редактировать Я нашел решение, использующее несколько более старую версию библиотеки dagre-d3 (4.11). Если кто-то может найти проблему с последней версией, это тоже поможет. Спасибо

Я использую Dagre d3 для рисования графиков.

Когда я сначала вынести мой график, я

g = new dagreD3.graphlib.Graph() 
      .setGraph({}) 
      .setDefaultEdgeLabel(function() { return {}; }); 
var svg = d3.select("svg"), 
      inner = svg.select("g"); 
      svgGroup = svg.append("g"); 
var render = new dagreD3.render(); 

     render(d3.select("svg g"), g); 

     var zoom = d3.behavior.zoom().on("zoom", function() { 
       inner.attr("transform", "translate(" + d3.event.translate + ")" + 
        "scale(" + d3.event.scale + ")"); 
       currentZoomScale = d3.event.scale; 
       currentPosition = d3.event.translate; 

      }); 
     svg.call(zoom); 

Затем, когда пользователь нажимает на определенный узел, я хочу, чтобы добавить HTML к метке этого узла. Это не показывает, если я не пересборку график, который я делаю со следующим:

g.node(id).label += "<div>" + inputTemplate + "</div>"; 

var zoom = d3.behavior.zoom() 
     .scale(currentZoomScale) 
     .on("zoom", function() { 
     inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") 
        }); 
     svg.call(zoom); 

     d3.select("svg").on("dblclick.zoom", null); 
     inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")"); 

Я подумал, что, поддерживая currentPosition и currentZoomScale я смог бы убедиться, что граф остается хорошо после масштабирования и повторного -оказание. Но это не так. Все мои узлы становятся меньше, если я уменьшить, и больше, если бы я увеличить.

Answer 1

Я не кристально ясно по этой проблеме, но это может быть потому, что вы включили .scale(currentZoomScale) во второй строке

var zoom = d3.behavior.zoom() 
     .scale(currentZoomScale) 
     .on("zoom", function() { 
     inner.attr("transform", "translate(" + d3.event.translate + ")" + "scale(" + d3.event.scale + ")") 
        }); 
     svg.call(zoom); 

     d3.select("svg").on("dblclick.zoom", null); 
     inner.attr("transform", "translate(" + currentPosition + ")" + "scale(" + currentZoomScale + ")"); 

, а затем вы масштабируете его снова в innner.attr()?

Answer 2

Мне кажется, что проблема заключается здесь:

var svg = d3.select("svg"), 
    inner = svg.select("g"); 
    svgGroup = svg.append("g"); 

Если посмотреть на порядок вашего кода, нет <g> при определении inner. Итак, на данный момент inner - null. Когда вы перерисовываете диаграмму, группа теперь находится там, а inner - это не более null.

Таким образом, возможное решение только изменение порядка:

var svg = d3.select("svg"), 
    svgGroup = svg.append("g");//we first append the <g>..  
    inner = svg.select("g");//and only after that we select it