나는 dagre-D3 라이브러리 (4.11)의 약간 이전 버전을 사용하고 관련 솔루션을 발견 Dagre D3

Question

편집 을 사용하여 줌 후 HTML을 다시 렌더링. 누구든지 최신 버전의 문제를 발견하면 도움이 될 것입니다. 고마워요

저는 그래프를 그리기 위해 Dagre d3를 사용하고 있습니다. 특정 노드에 사용자가 클릭, 내가 그 노드의 레이블 HTML을 추가하고자 할 때

내가 처음에 내 그래프를 렌더링

, 나는, 그리고

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); 

을한다. 물론 줌 다시 후

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를 유지하여 I 그래프가 남아 있는지 확인 할 수있을 것이라고 생각

: 이것은 내가 다음과 같이 수행 그래프, 나는 다시 렌더링하지 않으면 표시되지 않습니다 -표현. 그러나 이것은 사실이 아닙니다. 내가 확대하면 내 모든 노드는 내가 축소하면 더, 더 큰된다.

Answer 1

나는이 문제에 대한 명확한 결정하지 않아요하지만 당신은

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 + ")"); 

의 두 번째 줄에 .scale(currentZoomScale)을 포함했기 때문에이 될 수있다

을 입력 한 다음 innner.attr()에서 다시 크기를 조정 하시겠습니까?

Answer 2

이 문제가 여기에있는 것을 나에게 보인다는 inner를 정의 할 때

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

당신이 코드의 순서를 보면, 아니 <g>이 없습니다. 따라서이 시점에서 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