I'm doing a school project on web-development and our teacher doesn't have a clue on the area that he should be teaching so I've been surfing trough the net in hopes of finding an answer.
My problem being, I'm supposed to edit a JavaScript code for a circular heat map so that the level of the circle would highlight on 'mouseover' also while showing the data of the segment that mouse hovers on, I found a answer close to what I'm doing:
But sadly seem to be unable to put that information to good use, seeing as I have only little clue on what I'm doing...
The code that I'm testing this all:
d3.select('#chart4')
.selectAll('svg')
.data([data])
.enter()
.append('svg')
.call(chart)
.selectAll('path')
;
/* //this should contain some of the information needed for the highlight...
var paths = g.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d",d3.svg.arc()
.innerRadius(ir)
.outerRadius(or)
.startAngle(sa)
.endAngle(ea));
*/
d3.selectAll("#chart4 path").on('mouseover', function() {
var d = d3.select(this).data()[0];
d3.select("#info").text(d.title + ' has value ' + d.value);
//should find a way to connect this witht the highlight one
});
/* //this function should make the highlight work, sadly I seem to be missing code
d3.selectAll("#chart4 path").on('mouseover', function() {
paths
.filter(function (d) { return d.pathNumber === thisData.pathNumber; })
.attr('fill', 'black'); });
*/
d3.selectAll("#chart4 svg").on('mouseout', function() {
d3.select("#info").text(''); });
Also shown here: JSFiddle
