using a polygon instead of a path

diff --git a/examples/default.html b/examples/default.html
index 9292e47..9a4f485 100644 (file)
--- a/examples/default.html
+++ b/examples/default.html
@@ -58,10 +58,10 @@
     svg circle.techniques,
     svg circle.platforms,
     svg circle.languages-frameworks,
-    svg path.tools,
-    svg path.techniques,
-    svg path.platforms,
-    svg path.languages-frameworks {
+    svg polygon.tools,
+    svg polygon.techniques,
+    svg polygon.platforms,
+    svg polygon.languages-frameworks {
       stroke: #fff;
     }
     svg .tools { fill: #83AD78 }
@@ -194,7 +194,7 @@
   radar.setThirdQuadrant(platformsQuadrant);
   radar.setFourthQuadrant(languageFramework);
 
-  var radarGraph = new tr.graphing.Radar(800, radar);
+  var radarGraph = new tr.graphing.Radar(1080, radar);
   radarGraph.init('#radar').plot();
 </script>
 </html>

diff --git a/src/graphing/radar.js b/src/graphing/radar.js
index e588663..1b6081c 100644 (file)
--- a/src/graphing/radar.js
+++ b/src/graphing/radar.js
@@ -69,20 +69,20 @@ tr.graphing.Radar = function (size, radar) {
   };
 
   function triangle(x, y, cssClass) {
-    return svg.append('path')
-      .attr('d', 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406')
-      .attr('transform', 'translate(' + ((-421 * .73) + x) + ',' + ((-299 * 0.73) + y) + ') scale(0.73) ')
-      .attr('class', cssClass)
-      .attr('stroke-width', 2);
+    var tsize, top, left, right, bottom, points;
 
-    var tsize = 7
+    tsize = 13
+    top = y - tsize;
+    left = (x - tsize + 1);
+    right = (x + tsize + 1);
+    bottom = (y + tsize - tsize / 2.5);
 
-    var top = y - tsize + 2;
-    var left = (x - tsize);
-    var right = (x + tsize);
-    var bottom = (y + tsize);
+    points = x + 1 + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom;
 
-    var points = x + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom;
+    return svg.append('polygon')
+      .attr('points', points)
+      .attr('class', cssClass)
+      .attr('stroke-width', 1.5);
   }
 
   function circle(x, y, cssClass) {