Created
November 1, 2014 23:08
-
-
Save arigesher/53ba6d9a008429e708fd to your computer and use it in GitHub Desktop.
d3 demo of sector highlighting code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <body style='align: center'> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <div class='content' style='margin: auto'> | |
| </div> | |
| <script> | |
| var data = | |
| [ | |
| { | |
| sectorName: "sector0", | |
| innerRadius: 25, | |
| outerRadius: 75, | |
| startAngle: 0, | |
| endAngle: Math.PI / 2, | |
| fill: 'blue' | |
| }, | |
| { | |
| sectorName: "sector1", | |
| innerRadius: 25, | |
| outerRadius: 75, | |
| startAngle: Math.PI / 2, | |
| endAngle: Math.PI, | |
| fill: 'red' | |
| }, | |
| { | |
| sectorName: "sector2", | |
| innerRadius: 25, | |
| outerRadius: 75, | |
| startAngle: Math.PI, | |
| endAngle: 3 * Math.PI / 2, | |
| fill: 'green' | |
| }, | |
| { | |
| sectorName: "sector3", | |
| innerRadius: 25, | |
| outerRadius: 75, | |
| startAngle: 3 * Math.PI / 2, | |
| endAngle: 2 * Math.PI, | |
| fill: 'black' | |
| } | |
| ]; | |
| var div = d3.select('.content'); | |
| var svg = div.append('svg').style('position', 'absolute').style('width', '500px').style('height','500px'); | |
| // the selectAll here is the trick - first, you have to select the elements you want to create | |
| // (even though they don't yet exist), then bind data to them, and finally, specify how they are created | |
| // with the .enter() selection | |
| var enter_selection = svg.selectAll('path').data(data).enter() | |
| var g = enter_selection.append("g").attr("transform","translate(250,250)") | |
| .style('position', 'absolute') | |
| .style('top', '250px') | |
| .style('left', '250px'); | |
| // svg z-indexing | |
| g.append("path") | |
| .attr("d",d3.svg.arc()) | |
| .style('fill', function(d) { return "#2E3843"; }) | |
| .style('opacity', '0.6') | |
| .on('mouseover', function(d){ | |
| d3.select(this).style('opacity', '1'); | |
| d3.select(".notch-" + d.sectorName).style('opacity','1'); | |
| }) | |
| .on('mouseout', function(d){ | |
| d3.select(this).style('opacity', '0.6'); | |
| d3.select(".notch-" + d.sectorName).style('opacity','0'); | |
| }); | |
| // create the notch for the sectors as a function of the sector itself | |
| var notch_arc = d3.svg.arc(); | |
| notch_arc.innerRadius(function(d) { | |
| return d.outerRadius - 6; | |
| }); | |
| notch_arc.outerRadius(function(d) { | |
| return d.outerRadius - 2; | |
| }); | |
| notch_arc.startAngle(function(d){ | |
| var arc_length = d.endAngle - d.startAngle; | |
| var notch_length = .99 * arc_length; | |
| return d.startAngle + (arc_length - notch_length) / 2; | |
| }); | |
| notch_arc.endAngle(function(d){ | |
| var arc_length = d.endAngle - d.startAngle; | |
| var notch_length = .99 * arc_length; | |
| return d.endAngle - (arc_length - notch_length) / 2; | |
| }); | |
| g.append("path") | |
| .attr("class",function(d) { return "notch-" + d.sectorName;}) | |
| .style('fill','#2169A8') | |
| .style('opacity','0') | |
| .style('z-index','1') | |
| .attr("d",notch_arc); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment