Tái xuất hiện HTML sau khi thu phóng bằng Dagre d3

Question

Chỉnh sửa Tôi đã tìm thấy giải pháp liên quan đến việc sử dụng phiên bản cũ hơn của thư viện dagre-d3 (4.11). Nếu bất cứ ai cũng có thể tìm thấy vấn đề với phiên bản mới nhất, điều đó cũng sẽ giúp ích cho bạn. Cảm ơn bạn

Tôi đang sử dụng Dagre d3 để vẽ một số biểu đồ.

Khi tôi bước đầu làm cho đồ thị của tôi, tôi làm

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

Sau đó, khi người dùng nhấp vào một nút nào đó, tôi muốn thêm HTML để nhãn của nút đó. Điều này không hiển thị trừ khi tôi lại vẽ đồ thị, mà tôi làm như sau:

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

Tôi nghĩ rằng bằng cách duy trì currentPosition và currentZoomScale tôi sẽ có thể chắc chắn rằng đồ thị vẫn tốt sau khi phóng to và tái -giảm giá. Nhưng đây không phải là trường hợp. Tất cả các nút của tôi trở nên nhỏ hơn nếu tôi thu nhỏ, và lớn hơn nếu tôi phóng to.

Answer 1

Tôi không phải là tinh thể rõ ràng về vấn đề này nhưng nó có thể là do bạn đã bao gồm .scale(currentZoomScale) trong dòng thứ hai của

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

và sau đó bạn sẽ mở rộng nó một lần nữa trong innner.attr()?

Answer 2

Dường như với tôi rằng vấn đề nằm ở đây:

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

Nếu bạn nhìn vào thứ tự của mã của bạn, không có <g> khi bạn xác định inner. Vì vậy, tại thời điểm này, inner là null. Khi bạn kết xuất lại biểu đồ, nhóm hiện có ở đó và inner không còn là lựa chọn null nữa.

Do đó, một giải pháp khả thi là chỉ cần thay đổi thứ tự:

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