I have a forced directed graph and I like to highlight its parents and make them a bit bigger than others I can make them new colour and make them bigger but I cannot return them to their default size and colour. Whenever I move my mouse on the element it changes all of them green but when I move out my mouse only centre element changes colour but it does not return to its own colour it returns to colour that I put my mouse on.
function highlightParents(d) {
var colour = d3.event.type === 'mouseover' ? 'green' : color(d.group);
d3.select('#id-' + parseInt(d.id)).style('fill', colour);
var bid = "";
for (var i = 0; i < link._groups[0].length; i++) {
if (link._groups[0][i].attributes[0].value.replace("t-", "") == d.id) //target
{
bid += link._groups[0][i].attributes[1].value.replace("s-", ""); //source
d.id = link._groups[0][i].attributes[1].value.replace("s-", ""); //source
var colour = d3.event.type === 'mouseover' ? 'green' : color(d.group);
d3.select('#id-' + parseInt(d.id)).style('fill', colour);
var setr = d3.event.type === 'mouseover' ? '7' : 5;
d3.select('#id-' + parseInt(d.id)).style('r', setr);
i = 0;
if (link._groups[0][i].attributes[1].value == "304410") {
break;
d3.selectAll('#id-' + parseInt(d.id)).style('fill', (d.group));
}
}
}
}
Could you use 'mouseout' event?
For example:
function highlightParents(d) {
var colour = color(d.group);
if (d3.event.type === 'mouseover') colour = 'green';
if (d3.event.type === 'mouseout') colour = 'red';
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.