Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
d3 demo of sector highlighting code
<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