Add support for 3 different marker types

Gruntfile.coffee

@@ -35,6 +35,7 @@ module.exports = (grunt) ->
               'src/size.js',
               'src/shape.js',
               'src/shape.line.js',
+              'src/marker.js',
               'src/shape.bar.js',
               'src/stacked.js',
               'src/text.js',

src/config.js

@@ -151,6 +151,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         // line
         line_connectNull: false,
         line_step_type: 'step',
+        marker_types: undefined,
         // bar
         bar_width: undefined,
         bar_width_ratio: 0.6,

src/marker.js

+var marker_fn = (function() {
+    function create(name){
+        return d3.select(document.createElementNS("http://www.w3.org/2000/svg", name));
+    }
+    
+    function pt(point){
+        if(isNaN(point.x + point.y)) return '';
+        return point.x+','+point.y;
+    }
+    
+    function buildPath(points){
+        var path = '';
+        for(var i = 0; i<points.length; i++){
+            path += (points[i].action || 'L') + pt(points[i]);
+        }
+        return path;
+    }
+    
+    return {
+        circle: function(size){
+            return create('circle').attr('r', size/2);
+        },
+        rhombus: function(size){
+            var marker = create('path');
+            // height/width ratio
+            var ratio = 1;
+            
+            size /= 2;
+            
+            var path = buildPath([
+                { action: 'M', x: 0,           y: size },
+                { action: 'L', x: size/ratio,  y: 0 },
+                { action: 'L', x: 0,           y: -size },
+                { action: 'L', x: -size/ratio, y: 0 },
+                { action: 'Z' }
+            ]);
+            
+            marker.attr('d', path)
+                  .style('stroke', 'none');
+            
+            return marker;
+        },
+        square: function(size){
+            var marker = create('rect');
+            marker.attr('width', size)
+                  .attr('height', size)
+                  .attr('x', -size/2)
+                  .attr('y', -size/2);
+          
+            return marker;
+        }
+    };
+})();
+
+c3_chart_internal_fn.getMarker = function(d, i){
+    var $$ = this;
+
+    if(!$$.config.marker_types || !$$.config.marker_types[d.id]){
+        return marker_fn.circle($$.pointR(d, i));
+    }
+
+    return marker_fn[$$.config.marker_types[d.id]]($$.pointR(d, i), $$.color(d, i)).node();
+};
\ No newline at end of file

src/shape.line.js

@@ -294,9 +294,8 @@ c3_chart_internal_fn.updateCircle = function () {
     var $$ = this;
     $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
         .data($$.lineOrScatterData.bind($$));
-    $$.mainCircle.enter().append("circle")
+    $$.mainCircle.enter().append($$.getMarker.bind($$))
         .attr("class", $$.classCircle.bind($$))
-        .attr("r", $$.pointR.bind($$))
         .style("fill", $$.color);
     $$.mainCircle
         .style("opacity", $$.initialOpacityForCircle.bind($$));
@@ -308,11 +307,12 @@ c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
         (withTransition ? this.mainCircle.transition() : this.mainCircle)
             .style('opacity', this.opacityForCircle.bind(this))
             .style("fill", this.color)
-            .attr("cx", cx)
-            .attr("cy", cy),
+            .attr('transform', function(d,i){
+                return 'translate('+cx(d,i)+' '+cy(d,i)+')';
+            }),
         (withTransition ? selectedCircles.transition() : selectedCircles)
-            .attr("cx", cx)
-            .attr("cy", cy)
+            .attr("x", cx)
+            .attr("y", cy)
     ];
 };
 c3_chart_internal_fn.circleX = function (d) {