Minimap view for a d3 diagram in a layout? - d3.js

Question

I'd like to include a helicopter view (or minimap view) in a layout with d3 diagrams. I am using ariutta's svg-pan-zoom, but the thumbnail view doesn't behave as expected. After many tests, I've found no way to get it. I'd really appreciate any suggestion.
Here there is the jsfiddle with a simplified version of what I have. To make it easy, a big part of code has been removed and a d3noob tree diagram has been used. We also use dhtmlx, but this part has also been removed from this jsfiddle (maybe later we can consider including it) : jsfiddle with our code
This is what I want to get:
enter image description here
So as to display the diagram in the thumbnail view, the d3 chart is encoded (base64) and used as background image for the thumbnail view (also tried as src).
Possible causes:
dhtmlx
dynamic svg
encoded (base64) svg
Thanks in advance!
That's a simplified version of the code (without using dhtmlx).
HTML code
<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>
Main JS code (it needs thumbnailViewer.js and svg-pan-zoom.js, but not included here)
//------ 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 code
.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;
}