Built with blockbuilder.org
Access at Blockbuilder
Draw circle with multiple arcs around the circle.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; }
text.siteText {
fill:black;
font-size:20;
}
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("g")
.attr("class","sitesClass")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x=312,y=157;
var rad=80;
var angle=167;
var arc = d3.svg.arc()
.innerRadius(function(d) {
return isNaN( d.innerRadius ) ? 0 : d.innerRadius;
})
.outerRadius(function(d) {
return isNaN( d.outerRadius ) ? rad : d.outerRadius;
})
.startAngle( function(d) {
return isNaN( d.startAngle ) ? 0 : d.startAngle;
})
.endAngle( function(d) {
return isNaN( d.endAngle ) ? 0 : d.endAngle;
});
//.startAngle((angle-22)*(Math.PI/180)).endAngle((angle+22)*(Math.PI/180));
//console.log(arc.centroid());
var data = [
{name:"obj1",x:210,y:127,r:10,records:[{azi:65,ir:10,r:80, n:2},{azi:170,ir:10,r:80},{azi:270,ir:10,r:80}]},
{name:"obj2",x:96,y:127,r:10,records:[{azi:15,ir:10,r:80},{azi:200,ir:10,r:80},{azi:300,ir:10,r:80}]},
{name:"obj3",x:96,y:260,r:10,records:[{azi:0,circle:1,ir:10,r:50}]}
];
var scaleSecRadius = d3.scale.linear().domain([3,19]).range([5,17]);
var sitesgroup = d3.selectAll('g.sitesClass')
.datum(data)
var sitegroup = sitesgroup.selectAll('g.siteClass')
.data(function(d) {return d;});
var site = sitegroup.enter()
.append('svg:g')
.attr("class","siteClass")
.attr("transform", function(d) {
return "translate("+d.x+","+d.y+")"
});
site.append('svg:circle')
.attr('cx',0)
.attr('cy',0)
.attr('r',function(d) {return d.r;})
.attr('fill','red')
.attr('stroke','black')
.attr('stroke-width',1);
var sectorGroup = site.selectAll('g.secClass')
.data(function(d) {
return d.records;
});
// Create ref to sec group
var secGroup = sectorGroup.enter()
.append('svg:g')
.attr("class","secGroup");
// append to sec group ref
// obj.startAngle = (d.azi-20)*(Math.PI/180);
// obj.endAngle = (d.azi+20)*(Math.PI/180);
sectorGroup.append('svg:path')
.attr('d',function(d) {
console.log('this is d',d)
var secSize = 40;
var startAngle = d.circle ? 0 : (d.azi-(secSize/2))*(Math.PI/180);
var endAngle = d.circle ? 360*(Math.PI/180) : (d.azi+(secSize/2))*(Math.PI/180);
var obj = {};
obj.innerRadius = d.ir*1.34368;
obj.startAngle = startAngle;
obj.endAngle = endAngle;
obj.outerRadius = scaleSecRadius(d.r);
return arc(obj);
})
.attr('fill','orange')
.attr('stroke','black')
.attr('stroke-width',1);
site.append('svg:text')
.text(function(d) {return d.name;})
.attr("class","siteText")
.attr("fill","pink")
.attr("stroke","green")
.attr("stroke-width",.5)
.attr("font-size",15)
.attr("transform","translate(0,26)")
.attr("text-anchor","middle");
var t_anchor = function(d) {
return d.azi > 0 && d.azi < 180 ? "start" : "end";
}
sectorGroup
.append('svg:text')
.text(function(d) {
return d.azi;
})
.attr("fill","black")
.attr('stroke-width',.3)
.attr("transform", function(d) {
var obj = {};
obj.innerRadius = 14;
obj.startAngle = (d.azi-20)*(Math.PI/180);
obj.endAngle = (d.azi+20)*(Math.PI/180);
obj.outerRadius = d.r * 2 + 2;
var center = arc.centroid(obj);
return "translate(" +center+ ")";
})
.attr("font-size",8)
.attr("text-anchor", t_anchor);
</script>
</body>