I have a fairly customized d3.js sankey diagram set up, and it's working correctly. However I would like to make my hover options stand out. Ideally I would like to make it so that when I hover over any given node it would display an html table that I can easily customize. Right now my sankey code looks like this:
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function() {
this.parentNode.appendChild(this); })
.on("drag", dragmove));
// add the rectangles for the nodes
node.append("a")
.attr("xlink:href", function(d,i) { return "focus.php?name="+d.name; })
.attr("xlink:show","new")
.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) { return d.color; })
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
.append("title")
.text(function(d) {
return d.name +
"\n" + format(d.value) +
"\nNPS: " + d.NPS +
"\nAHT: " + d.AHT + " seconds" +
"\nOSAT: " + d.satisfaction });
The last few lines are the values that get displayed when you hover over the node, like I said, this is working. But I'm not able to format them how I'd like. For instance I would love the first value (d.name) to be bold and centered, and then in addition I'm sure there's other things like colors and table spacing that I'd like to add. But I'm unsure how to go about getting this to work.
What I would like to do is create a variable or function of some kind that just has the formatting and then call it. Like:
var FormatHover = "<table><tr><td><center><b>d.name</b></center></td></tr>"
"<tr><td>other stuff</td><td>other stuff</td></tr></table>";
and then just call that to my append like:
.append("title")
.text(FormatHover)
but I know I can't apply HTML to svg element, so I was wondering if there's a way to get around that?
Any help is appreciated. :D
