d3.js - レイアウト内の d3 ダイアグラムのミニマップ ビュー?

Question

d3 ダイアグラムを使用して、ヘリコプター ビュー (またはミニマップ ビュー) をレイアウトに含めたいと思います。ariutta の svg-pan-zoomを使用していますが、サムネイル ビューが期待どおりに動作しません。多くのテストの後、私はそれを取得する方法を見つけませんでした。提案をいただければ幸いです。

ここに、私が持っているものを簡略化したバージョンの jsfiddle があります。簡単にするために、コードの大部分が削除され、d3noob ツリー図が使用されています。dhtmlxも使用していますが、この部分もこの jsfiddle から削除されています (後で含めることを検討できます): jsfiddle とコード

これは私が取得したいものです: ここに画像の説明を入力してください

ダイアグラムをサムネイル ビューで表示するために、d3 チャートはエンコード (base64)され、サムネイル ビューの背景画像として使用されます (src としても試行されます)。

考えられる原因：

• dhtmlx
• 動的 SVG
• エンコードされた (base64) svg

前もって感謝します！

これはコードの単純化されたバージョンです (dhtmlx を使用していません)。

HTML コード

    <div id="mainScreen" style="height:100%; width:100%; position:absolute;" >
        <!-- Original: svg instead of div -->
        <!-- <svg id="diagramLayout" style="height:100%;width:100%;position:absolute;">
                </svg> --> 
                <div id="diagramLayout" style="height:100%; width:100%; position:absolute;"></div>
                <div id="thumbViewContainer">
                      <svg id="scopeContainer" class="thumbViewClass">
                        <g>
                          <rect id="scope" fill="red" fill-opacity="0.1" stroke="red" stroke-width="2px" x="0" y="0" width="0" height="0"/>
                          <line id="line1" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
                          <line id="line2" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
                        </g>
                      </svg>
                <img id="thumbView" type="image/svg+xml" src="" class="thumbViewClass" />
      </div>
</div>

メインの JS コード (thumbnailViewer.js と svg-pan-zoom.js が必要ですが、ここには含まれていません)

         //------ Tree Layout: https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
 var treeData =
                  {
                    "name": "Top Level",
                    "children": [
                      { 
                        "name": "Level 2: A",
                        "children": [
                          { "name": "Son of A" },
                          { "name": "Daughter of A" }
                        ]
                      },
                      { "name": "Level 2: B" }
                    ]
                  };



                // Set the dimensions and margins of the diagram
                var margin = {top: 20, right: 90, bottom: 30, left: 90},
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;

                // append the svg object to the body of the page
                // appends a 'group' element to 'svg'
                // moves the 'group' element to the top left margin
                var svg = d3.select("#diagramLayout").append("svg")
                    .attr("width", width + margin.right + margin.left)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate("
                          + margin.left + "," + margin.top + ")");

                var i = 0,
                    duration = 750,
                    root;

                // declares a tree layout and assigns the size
                var treemap = d3.tree().size([height, width]);

                // Assigns parent, children, height, depth
                root = d3.hierarchy(treeData, function(d) { return d.children; });
                root.x0 = height / 2;
                root.y0 = 0;

                // Collapse after the second level
                root.children.forEach(collapse);

                update(root);

                // Collapse the node and all it's children
                function collapse(d) {
                  if(d.children) {
                    d._children = d.children
                    d._children.forEach(collapse)
                    d.children = null
                  }
                }

                function update(source) {

                  // Assigns the x and y position for the nodes
                  var treeData = treemap(root);

                  // Compute the new tree layout.
                  var nodes = treeData.descendants(),
                      links = treeData.descendants().slice(1);

                  // Normalize for fixed-depth.
                  nodes.forEach(function(d){ d.y = d.depth * 180});

                  // ****************** Nodes section ***************************

                  // Update the nodes...
                  var node = svg.selectAll('g.node')
                      .data(nodes, function(d) {return d.id || (d.id = ++i); });

                  // Enter any new modes at the parent's previous position.
                  var nodeEnter = node.enter().append('g')
                      .attr('class', 'node')
                      .attr("transform", function(d) {
                        return "translate(" + source.y0 + "," + source.x0 + ")";
                    })
                    .on('click', click);

                  // Add Circle for the nodes
                  nodeEnter.append('circle')
                      .attr('class', 'node')
                      .attr('r', 1e-6)
                      .style("fill", function(d) {
                          return d._children ? "lightsteelblue" : "#fff";
                      });

                  // Add labels for the nodes
                  nodeEnter.append('text')
                      .attr("dy", ".35em")
                      .attr("x", function(d) {
                          return d.children || d._children ? -13 : 13;
                      })
                      .attr("text-anchor", function(d) {
                          return d.children || d._children ? "end" : "start";
                      })
                      .text(function(d) { return d.data.name; });

                  // UPDATE
                  var nodeUpdate = nodeEnter.merge(node);

                  // Transition to the proper position for the node
                  nodeUpdate.transition()
                    .duration(duration)
                    .attr("transform", function(d) { 
                        return "translate(" + d.y + "," + d.x + ")";
                     });

                  // Update the node attributes and style
                  nodeUpdate.select('circle.node')
                    .attr('r', 10)
                    .style("fill", function(d) {
                        return d._children ? "lightsteelblue" : "#fff";
                    })
                    .attr('cursor', 'pointer');


                  // Remove any exiting nodes
                  var nodeExit = node.exit().transition()
                      .duration(duration)
                      .attr("transform", function(d) {
                          return "translate(" + source.y + "," + source.x + ")";
                      })
                      .remove();

                  // On exit reduce the node circles size to 0
                  nodeExit.select('circle')
                    .attr('r', 1e-6);

                  // On exit reduce the opacity of text labels
                  nodeExit.select('text')
                    .style('fill-opacity', 1e-6);

                  // ****************** links section ***************************

                  // Update the links...
                  var link = svg.selectAll('path.link')
                      .data(links, function(d) { return d.id; });

                  // Enter any new links at the parent's previous position.
                  var linkEnter = link.enter().insert('path', "g")
                      .attr("class", "link")
                      .attr('d', function(d){
                        var o = {x: source.x0, y: source.y0}
                        return diagonal(o, o)
                      });

                  // UPDATE
                  var linkUpdate = linkEnter.merge(link);

                  // Transition back to the parent element position
                  linkUpdate.transition()
                      .duration(duration)
                      .attr('d', function(d){ return diagonal(d, d.parent) });

                  // Remove any exiting links
                  var linkExit = link.exit().transition()
                      .duration(duration)
                      .attr('d', function(d) {
                        var o = {x: source.x, y: source.y}
                        return diagonal(o, o)
                      })
                      .remove();

                  // Store the old positions for transition.
                  nodes.forEach(function(d){
                    d.x0 = d.x;
                    d.y0 = d.y;
                  });

                  // Creates a curved (diagonal) path from parent to the child nodes
                  function diagonal(s, d) {

                    path = `M ${s.y} ${s.x}
                            C ${(s.y + d.y) / 2} ${s.x},
                              ${(s.y + d.y) / 2} ${d.x},
                              ${d.y} ${d.x}`

                    return path
                  }

                  // Toggle children on click.
                  function click(d) {
                    if (d.children) {
                        d._children = d.children;
                        d.children = null;
                      } else {
                        d.children = d._children;
                        d._children = null;
                      }
                    update(d);
                  }
                }


                // Don't use window.onLoad like this in production, because it can only listen to one function.
                function Reset() {
                    if(panZoom !== undefined){
                        panZoom.destroy();
                    }                   
                    panZoom = svgPanZoom('#diagramLayout', {
                      zoomEnabled: true,
                      dblClickZoomEnabled: false,
                      fit:true,
                      controlIconsEnabled: false
                    });
                    loadMiniMap();
                }
                function load() {
                    panZoom = svgPanZoom('#diagramLayout', {
                        zoomEnabled: true,
                        // dblClickZoomEnabled: false,
                        // fit:true,
                        // controlIconsEnabled: false
                    });

                    loadMiniMap();

                }

                function loadMiniMap() {

                    var emebd = document.getElementById("thumbView");
                    //get svg element.
                    var svg = document.getElementById("diagramLayout");


                    //get svg source.
                    var serializer = new XMLSerializer();
                    var source = serializer.serializeToString(svg);


                    var mySVG64 = window.btoa(source);

          emebd.style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')";

          emebd.style.backgroundRepeat = "no-repeat";
          emebd.backgroundAttachment = "fixed";
          emebd.style.backgroundPosition = "center";
          emebd.style.backgroundSize = "contain"; 
          //emebd.src = "data:image/svg+xml;base64, "+ mySVG64 

                    thumbnailViewer({mainViewId: 'diagramLayout',thumbViewId: 'thumbView'});
                }

CSS コード

.node circle {
      fill: #fff;
      stroke: steelblue;
      stroke-width: 3px;
    }

    .node text {
      font: 12px sans-serif;
    }

    .link {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }



    #mainViewContainer {
        width: 95%;
        height: 95%;
        border: 1px solid black;
        margin: 10px;
        padding: 3px;
        overflow: hidden;
    }

    #mainView {
        width: 100%;
        height: 100%;
        min-height: 100%;
        display: inline;
    }

    .thumbViewClass {
        border: 1px solid black;
        position: absolute;
        bottom: 12px;
        right: 15px;
        width: 12%;
        height: 15%;
        margin: 3px;
        padding: 3px;
        overflow: hidden;
    }

    #thumbView {
        z-index: 110;
        background: white;
    }

    #scopeContainer {
        z-index: 120;
    }