Plugin - Drawing Shapes in a Circle

version 2

by Nivaldo

HTML

<p style="font-weight: bold">- export params: color</p>
<p style="color: red">- revisit ratio between r and w parms</p>
<p style="color: red">- revisit handling of svg inside plugin</p>
<p>- export events via dispatch</p>
<p>- eventually consider other shapes</p>

<div id="viz"></div>
<div id="viz2"></div>

CSS

#viz {
    float: left;
    background-color: antiquewhite;
}
#viz2 {
    background-color: linen;
}

JavaScript

d3.fota = {};

d3.fota.radial = function module() {
    
    var r = 100,
        m = 3.2,
        w = r * m, // default ration between r and w
        h = w,
        rad = Math.PI/180;
    
    //var dispatch = d3.dispatch("customHover");
    function exports(_selection) {
        console.log(m);
        console.log(w);
        _selection.each(function(_data) {
            var step = 360/_data.length;
            console.log(_data);
            var svg = d3.select(this).select('svg');
            if ( svg.empty() ) {
				var svg = d3.select(this).append('svg')
                    .attr('width', w)
                    .attr('height', h)
                  .append('g')
                    .attr('transform', 'translate(' + (w/2) + ',' + (h/2) + ')');
			};
                          
            svg.selectAll('g')
                .data(_data)
              .enter()
              .append('circle')
                .attr('fill', 'steelblue')
                .attr('r', w/step)
                .attr('transform', function (d, i) {
                    return 'translate(' + ((w/2-r) * Math.cos((step*i) * Math.PI/180)) + ',' + ((w/2-r) * Math.sin((step*i) * Math.PI/180)) + ')';
                });
        });
    };
    
    exports.r = function(_x) {
        if ( !arguments.length ) return r;
        r = parseInt(_x);
        return this;
    };
    
    exports.w = function(_x) {
        if ( !arguments.length ) return w;
        w = _x;
        return this;
    };
    
    //d3.rebind(exports, dispatch, "on");
    return exports;
};

var radial = d3.fota.radial();
radial.r(80).w(100);
var data = [1, 2, 3, 4, 5, 6, 7];
var container = d3.select("#viz").datum(data).call(radial);
var data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
radial.r(125).w(450);
var container2 = d3.select("#viz2").datum(data2).call(radial);