Chart legend

_.md

[ Launch: Chart legend ] 6209407 by first-developer

config.json

{"description":"Chart legend","endpoint":"","display":"svg","public":true,"require":[{"name":"d3.chart","url":"https://raw.github.com/misoproject/d3.chart/master/d3.chart.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/p1JDlnv.png"}

inlet.js

d3.chart("BaseChart").extend("MyChart", {
    get : function (attr) {
        var chartAttr = this["_" + attr];
        if (!chartAttr) {
            return;
        } 
        return chartAttr;
    } 
 
,   set : function (attrs_values) {
        var self = this;

        function _set(key, val) {
            var attrKey = "_" + key;
            self[attrKey] = val;
        }

        if (arguments.length && arguments.length === 2) {
            _set(arguments[0], arguments[1]);
        }
        else if (typeof attrs_values == "object") { 
            for ( var attr in attrs_values ) {
                _set(attr, attrs_values[attr]);
            }
        }

        return this;
    }
});
 
 


var data = ["adidas" , "nike", "lol"];


 

// =============================================
// My CHART
// =============================================

d3.chart("MyChart").extend("LegendChart", {

    initialize : function (options) {
        
        var chart = this;

        chart.base.classed("MyChart", true);


        // ---------------------------------------------------------
        // Defaults
        // ---------------------------------------------------------

        chart.defaults = {
          	pillWidth  : 15
         ,	pillHeight : 10
         ,	gutter : 10
         };

        chart.set({
            "layout" 	: options.layout  
        ,   "width"  	: options.width  
        ,   "height"  	: options.height  
        ,   "gutter"  	: options.gutter   	 || chart.defaults.gutter
        ,	"pillWidth" : options.pillWidth  || chart.defaults.pillWidth
        ,	"pillHeight": options.pillHeight || chart.defaults.pillHeight
        });

 
        // ---------------------------------------------------------
        // Styles
        // ---------------------------------------------------------

        chart.styles = {};


        // ---------------------------------------------------------
        // Layers
        // ---------------------------------------------------------

                 
        chart.layer("LegendLayer", chart.base.append("g"), {
            dataBind : function (data) {
        
                var chart     	= this.chart()
                ,   layout    	= chart.get("layout") || {}
                ,	itemCount 	= data.length;
              
              
                //var 	legendWidth = layout.zones.legend.attr("width")  || chart.width() 
                //,		legendHeigh = layout.zones.legend.attr("height") || chart.height();
        
               var legendWidth   = chart.width() 
                ,	legendHeight = chart.height();
        
              
                this.classed("LegendLayer", true);
              
                this.attr({
                	transform : 'translate(0, ' + chart.height()/2 +')'
                });
                
              	// setting legend dimensions and positions
                
                chart.set({
                  	width 	 	: legendWidth
                ,	height  	: legendHeight
                , 	itemWidth  	: chart.width()  / itemCount
                ,	itemtHeight	: chart.height()
                });
              
              // Compute item elements size
              var textWidth  =  chart.get("itemWidth")
              						- chart.get("gutter")
              						- chart.get("pillWidth");
              
              var textHeight = chart.get("itemtHeight");
              
              chart.set({
                 textWidth  : textWidth
              ,  textHeight : textHeight
              });
             
              
              return this.selectAll("g.legend-item")
             	 .data(data);
            }
        
        ,   insert : function () {
                return this.append("g");
            }
        
        ,   events : {
                "enter" : function () {
                    var chart  = this.chart()
                    ,   layout = chart.get("layout")
                    ,	text
                    ,	pill;
        
                  	text = this.append("text")
                      	.text(function(d) {
                          return d;
                      	})
                    	.attr("x", chart.get("pillWidth") + chart.get("gutter"))
                    	.attr("y", chart.get("pillHeight"));
                  
                  
                    return this.attr("class", "legend-item")
                    	.attr("transform", function(d, i) {
                      		var indent = chart.get("itemWidth") * i;
                      
	                      	console.log("indexes", i, indent); 	
                      
                    		return  'translate(' + [indent, 0]  + ')';
                    	})
                    	.append("rect")
                    		.attr("class", "legend-square")
                    		.attr("width", chart.get("pillWidth"))
                    		.attr("height", chart.get("pillHeight"));
                }
            }
        });
  
    }
  
});


var legend = window.svg = d3.select("svg")
	.chart("LegendChart", {
        width : 600
      , height : 50
    });  

legend.draw(data);

style.css

.legendLayer {
  background : #FFF;
}