Plugin - Drawing Shapes in a Circle

by Nivaldo

HTML

<p style="font-weight: bold">- export params: r, m, color</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;
}

JavaScript

d3.fota = {};

d3.fota.radial = function module() {
    
    var r = 100,
        m = 3.2,
        w = r * m,
        h = w,
        rad = Math.PI/180;
    
    //var dispatch = d3.dispatch("customHover");
    function graph(_selection) {
        console.log('here2');
        _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(' + r + ',' + r + ')');
			};
                          
            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)) + ')';
                });
        });
    };
    
    //d3.rebind(graph, dispatch, "on");
    return graph;
};

var radial = d3.fota.radial();
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];
var container2 = d3.select("#viz2").datum(data2).call(radial);