Integrating with canvas drawings in nodes - d3.js

Question

I'm attempting to draw a graph/network in which node contents should be filled with a third party library. So far, I was able to draw the graph with d3 with a container () for each node to be filled later on. My problem is that the containers seem not to yet exist when there are referred for drawing. Adding an onload event doesn't work either, but using a onclick event shows that everything is in place to work and most probably drawing starts before the DOM elements are actually created.
What is the best practice to make sure d3 generated DOM elements are created before starting assigning them content? The third party JS library I use only requires the div id to draw content in.
From arrays of nodes and relationships return by Neo4j, I build a graph with d3 as follow. Images to be displayed in nodes are stored in the neo4j data base as Base64 strings.
var width = 500, height = 500;
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var col = obj.columns;
var data = obj.data;
var nodes = obj.data[0][0].nodes;
var nodeMap = {};
nodes.forEach(function(x) { nodeMap[x.label] = x; });
var edges = obj.data[0][0].edges;
var links = edges.map(function(x) {
return { source: nodeMap[x.source], target: nodeMap[x.target], value: x.value };
});
var svg = d3.select("#graph").append("svg")
.attr("width", width)
.attr("height", height)
.attr("pointer-events", "all")
.append('g')
.call(d3.behavior.zoom().on("zoom", redraw))
.append('g');
var force = d3.layout.force()
.gravity(.3)
.distance(150)
.charge(-4000)
.size([width, height]);
var drag = force.drag()
.on("dragstart", dragstart);
force
.nodes(nodes)
.links(links)
.friction(0.8)
.start();
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("svg:g")
.attr("class", "node")
.on("dblclick", dblclick)
.call(force.drag);
node.append("circle")
.attr("r", 50);
node.append("image")
// display structure in nodes
.attr("xlink:href", function(d){
if (d.imgB64) {
return 'data:image/png;base64, ' + d.imgB64 ;
}
})
.attr("x", -40)
.attr("y", -40)
.attr("width", 80)
.attr("height", 80);
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
That code works fine. Hence, what I'm attempting to do is to replace the Base64 images with canvas drawings generated by a third party library.
This library works as follow:
var myCanvas = newCanvasViewer(id, data);
This function knows how to generate an image from the given data and puts the result in the DOM element, if the element already exists in the DOM, or generate a new canvas element in the DOM, directly in but unfortunately erasing any other existing DOM elements.
So, I changed the d3 above code, replacing the node.append('image') block with:
node.append("canvas")
.attr("id", function(d) {
var cnv = newCanvasViewer(d.name, d.data);
return d.name;
});
This obviously doesn't work, canvas objects are displayed but not in the nodes, probably because the DOM element doesn't exist yet when calling newCanvasViewer. Furthermore, the d3 graph is overwritten.
When setting an onclick function calling newCanvasViewer, the drawing shows up within the nodes on click.
node.append("circle")
.attr("r", 50)
.attr("onclick", function(d) {
return "newCanvasViewer('"+d.name+"', '"+d.data+"')";
});
node.append("canvas")
.attr("id", function(d) {
return d.name;
});
Since I would like each node to display its canvas drawing from start, I was wondering when to call the newCanvasViewer function? I guess an oncreate function at each node would make it, but doesn't exist.
Would a call back function work? Should I call it once d3 is finished with the whole network drawing?
In order to be more comprehensive, here is the HTML and javascript code with callback function to attempt drawing canvas content once d3 d3 is done drawing. I'm still stuck, the canvas sample is actually displayed but no canvas content show in nodes, probably due to timing between generating canvas containers and using them.
HTML:
<body onload="init(); cypherQuery()">
<div id="graph" align="left" valign="top"></div>
<div id="sample">
<canvas id="mol" style="width: 160px; height: 160px;"></canvas>
</div>
</body>
Javascript (in the HTML header):
var xmlhttp;
function init() {
xmlhttp = new XMLHttpRequest();
}
function cypherQuery() {
// perform neo4j query, extract JSON and call the network drawing (d3).
// ...
var obj = JSON.parse(xmlhttp.responseText);
drawGraph(obj, drawCanvas);
// this is just to show that canvasViewer does the
// job if the <canvas id='...'> element exists in DOM
var nodes = obj.data[0][0].nodes;
var cnv = newCanvasViewer("sample", nodes[0].data);
}
function drawGraph(obj, drawCanvas) {
// see code above from...
var width = 500, height = 500;
// ... to
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
function redraw() {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
// node.attr("font-size", (nodeFontSize / d3.event.scale) + "px");
}
function dblclick(d) {
d3.select(this).classed("fixed", d.fixed = false);
}
if (callback && typeof(callback) === "function") {
callback(nodes);
}
}