diff --git a/JobCircularLayout/src/js/graphic.js b/JobCircularLayout/src/js/graphic.js index 640e2b148..91a699224 100644 --- a/JobCircularLayout/src/js/graphic.js +++ b/JobCircularLayout/src/js/graphic.js @@ -73,6 +73,7 @@ function draw({computers,jobs,users,sampleS,serviceSelected}){ .attr("transform", "translate(" + graphicopt.centerX() + "," + graphicopt.centerY() + ")"); } + graphicopt.el = svg // Set the y scale of rectangles graphicopt.iLength = d3.keys(users).length; let innerY = d3.scaleLinear() @@ -412,6 +413,7 @@ function projectX(x) function mouseover(d){ // Bring to front + graphicopt.el.classed('onhighlight',true); d3.selectAll('.links .link').sort(function(a, b){ return d.relatedLinks.indexOf(a.node); }); d3.select(this).classed('highlight', true); for (let i = 0; i < d.relatedNodes.length; i++) @@ -428,12 +430,13 @@ function mouseover(d){ } for (let i = 0; i < d.relatedLinks.length; i++){ - d.relatedLinks[i].moveToFront().attr('stroke', '#fc4903'); + d.relatedLinks[i].moveToFront().classed('highlight', true); } } function mouseout(d){ + graphicopt.el.classed('onhighlight',false); d3.select(this).classed('highlight', false); for (let i = 0; i < d.relatedNodes.length; i++) { @@ -449,6 +452,6 @@ function mouseout(d){ } for (let i = 0; i < d.relatedLinks.length; i++){ - d.relatedLinks[i].attr("stroke", "#457b9d" ); + d.relatedLinks[i].classed("highlight", false ); } } diff --git a/JobCircularLayout/src/style/graph.css b/JobCircularLayout/src/style/graph.css index c69422188..005f8fd73 100644 --- a/JobCircularLayout/src/style/graph.css +++ b/JobCircularLayout/src/style/graph.css @@ -31,17 +31,18 @@ svg { stroke-width: 0.5px; pointer-events: all; } - -.outer_node.highlight circle -{ - stroke: #e63946; - stroke-width: 2px; +.onhighlight .outer_node circle{ + opacity: 0.1; +} +.onhighlight .link { + opacity: 0; +} +.onhighlight .link.highlight { + opacity: 1; } - .outer_node circle.highlight { - stroke: #e63946; - stroke-width: 2px; + opacity: 1; } text {