radar-chart/dist/radar-chart.min.js

Radar Chart

(function(){var a={options:{viewBox:"0,0,610,610",preserveAspectRatio:"none",chart:{width:"100%",height:"100%"},isDonut:!0,centerRadius:20,levels:3,verticalAxis:{show:!0,css:"vertical-axis"},horizontalAxis:{show:!0,css:"horizontal-axis"},verticalZoom:.8,maxValue:20,minValue:0,scale:10,showTitle:!0,placement:{show:!0,type:"circle",radius:7},infoPanel:{show:!0,width:70,height:24},infoPanelRadius:{rx:5,ry:5},infoPanelGap:{h:10,v:10},infoPadding:{left:3,top:4},arc:2*Math.PI,areaShow:!0,color:d3.scale.category10(),horizontalDashEnable:!0,verticalDashEnable:!0,itemTitleGap:6,surmiseFontGap:3},mixOptions:function(a){var t=Object.create(this.options);if(null!=a)for(var e in a)t[e]=a[e];return t},reset:function(a){d3.select(a).select("svg").remove()},getPoint:function(a,t,e){return{x:a*-Math.sin(t)+e,y:a*-Math.cos(t)+e}},drawHorizontalAxis:function(a,t,e,r,l,i,n){var o=n.getPoint(l,e*t,r),s=n.getPoint(l,e*(t+1),r),c=i.append("line"),d=n.options.horizontalDashEnable?"horizontal-axis dash":"horizontal-axis";c.attr("class",d).attr("x1",o.x).attr("y1",o.y).attr("x2",s.x).attr("y2",s.y)},drawHorizontalWeb:function(a,t,e,r,l,i,n,o){if(t)for(var s=l/n.levels,c=0;c<=n.levels;c++)for(var d=a.append("g").attr("class","horizontal-web"),p=c*s+n.centerRadius,u=0;i>u;u++)a.call(o.drawHorizontalAxis,u,e,r,p,d,o)},drawVerticalAxis:function(a,t,e,r,l){var i=r.append("line"),n=l.options.verticalDashEnable?" vertical-axis dash":"vertical-axis";i.attr("class",n).attr("x1",t.x).attr("y1",t.y).attr("x2",e.x).attr("y2",e.y)},drawItemTitle:function(a,t,e,r,l,i,n){var o=Math.ceil(t.x),s=Math.ceil(t.y),c=l.append("text").attr("class","item-title").text(r),d=0|c.style("font-size").replace("pt","").replace("px",""),p=n.surmiseFontGap*(r.length-1),u=d*r.length+p,h=d/2|0;o>i?c.attr("x",t.x+n.itemTitleGap):i>o?c.attr("x",t.x-n.itemTitleGap-u):c.attr("x",t.x-u/2),s>i?c.attr("y",t.y+h+n.itemTitleGap+5):i>s?c.attr("y",t.y-h-n.itemTitleGap):c.attr("y",t.y)},drawVerticalWeb:function(a,t,e,r,l,i,n,o){if(t)for(var s=a.append("g").attr("class","vertical-web"),c=a.append("g").attr("class","title-group"),d=a.datum()[0],p=0;i>p;p++){var u=e*p,h=o.getPoint(l,u,r),v=o.getPoint(n.centerRadius,u,r),x=d[p].title;a.call(o.drawVerticalAxis,h,v,s,o),a.call(o.drawItemTitle,h,v,x,c,r,n,o)}},getPoinst:function(a,t,e,r,l,i){for(var n={areaPoints:[],pointPoints:[]},o=a.datum().length,s=0;o>s;s++){n.pointPoints[s]=[];for(var c=a.datum()[s],d="",p=0,u=c.length;u>p;p++){var h=c[p].value,v=e*l.verticalZoom/(l.maxValue-l.minValue)*h+r,x=i.getPoint(v,t*p,e);d+=x.x+" "+x.y+",",n.pointPoints[s].push(x)}d=d.substr(0,d.length-1),n.areaPoints.push(d)}return n},areaMouseOver:function(){var a=d3.select(".area-box").selectAll(".area-group"),t=a.selectAll(".area"),e=d3.select(this).select(".area");t.classed("areaFade",!0),e.classed("areaFade",!1).classed("areaHover",!0)},areaMouseOut:function(){d3.select(".area-box").selectAll(".area-group").selectAll(".area").classed("areaFade",!1),d3.select(this).select(".area").classed("areaHover",!1)},drawArea:function(a,t,e,r,l){var i=a.append("g").attr("class","area-box");if(t)for(var n=0,o=e.length;o>n;n++){var s=i.append("g").attr("class","area-group"),c=s.append("polygon");c.attr("class","area").attr("points",e[n]).style("fill",r.color(n)).style("stroke",r.color(n)),s.on("mouseover",l.areaMouseOver),s.on("mouseout",l.areaMouseOut)}},markMouseOver:function(a){console.log(a);var t=this.self,e=d3.select(this),r=Number(e.attr("cx")),l=Number(e.attr("cy")),i=t.options.infoPanelGap,n=t.options.infoPadding;t.panel.classed("panel-show",!0).attr("x",r+i.h).attr("y",l+i.v),t.panelTitle.classed("panel-show",!0).attr("x",r+i.h+n.top).attr("y",l+i.v+14+n.left).text(a.title+":"+a.value)},markMouseOut:function(){var a=this.self;a.panel.classed("panel-show",!1),a.panelTitle.classed("panel-show",!1),a.panelTitle.text("")},drawMark:function(a,t,e,r){for(var l=a.selectAll(".area-group")[0],i=a.datum(),n=0,o=t.length;o>n;n++)for(var s=d3.select(l[n]),c=t[n],d=i[n],p=0,u=c.length;u>p;p++){var h=d[p],v=c[p],x=s.append(e.placement.type);x.attr("class","mark"),x.attr("cx",v.x).attr("cy",v.y).attr("r",e.placement.radius),x.style("fill",e.color(n)),x.datum(h),x[0][0].self=r,x.on("mouseover",r.markMouseOver),x.on("mouseout",r.markMouseOut)}},panel:null,panelTitle:null,drawInfoPanel:function(a,t,e){var r=t.infoPanel.width,l=t.infoPanel.height,i=a.append("g").attr("class","infoPanel-group");e.panel=i.append("rect").attr("class","infoPanel").attr("width",r).attr("height",l).attr("x",0).attr("y",0).attr("rx",t.infoPanelRadius.rx).attr("ry",t.infoPanelRadius.ry),e.panelTitle=i.append("text").attr("class","panel-title")},renderRadar:function(a,t,e){var r=a.datum()[0].length,l=t.arc/r,i=t.viewBox.split(","),n=i[2],o=i[3],s=Math.min(o/2,n/2),c=t.verticalZoom*s,d=e.getPoinst(a,l,s,t.centerRadius,t,e);a.call(e.drawHorizontalWeb,t.horizontalAxis.show,l,s,c,r,t,e),a.call(e.drawVerticalWeb,t.verticalAxis.show,l,s,c+t.centerRadius,r,t,e),a.call(e.drawArea,t.areaShow,d.areaPoints,t,e),a.call(e.drawMark,d.pointPoints,t,e),a.call(e.drawInfoPanel,t,e)},draw:function(a,t,e){this.reset();var r=this.mixOptions(e?e:null),l=d3.select(a).append("svg");l.attr("class","radar"),l.attr("width",r.chart.width),l.attr("height",r.chart.height),l.attr("viewBox",r.viewBox),l.attr("preserveAspectRatio",r.preserveAspectRatio),l.datum(t),l.call(this.renderRadar,r,this)}};window.Radar||(window.Radar=a),"undefined"!=typeof module&&(module.exports=a)}).call(this);