I am trying to add a toolhelper, more specifically this one to the d3.layout.partition example. The point is that when you hover over a rectangle (i.e. an element in the tree) the toolbar shows up displaying information about that section. I have previously been able to make the toolbar show up in the sunburst example, like so:
path.enter().append("path")
.attr("id", function(d, i) { return "path-" + i; })
.attr("d", arc)
.attr("fill-rule", "evenodd")
.style("fill", color)
.call(d3.helper.tooltip()
.attr({class: function(d, i) {
return d + ' ' + i + ' A';
}})
.style( {font: '10px sans-serif'} )
.text(function(d, i) {
return d.reportHTML;
})
)
.on("click", click);
But... When I try something similar to the partition example:
g.append("svg:rect")
.attr("width", root.dy * kx)
.attr("height", function(d) { return d.dx * ky; })
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.call(d3.helper.tooltip()
.attr({class: function(d, i) {
return d + ' ' + i + ' A';
}})
.style( {font: '10px sans-serif'} )
.text(function(d, i) {
return d.reportHTML;
})
)
.on("click", click);
The toolbar does not display. How can I adapt it so that it works with the partition layout as well?
The error messages I get in the web console when I try to hover over the rectangles are these:
Uncaught TypeError: Object #<Object> has no method 'indexOf'
Uncaught TypeError: Object #<Object> has no method 'mouse'