Radiating Spokes Off Of A Circle

http://stackoverflow.com/questions/22113811/radiating-spokes-off-of-a-circle

by Nivaldo

CSS

@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic);

JavaScript

data = [
    {name: 'one', parent: 'one', prop: 1}, 
    {name: 'two', parent: 'one', prop: 2}, 
    {name: 'three', parent: 'one', prop: 3}, 
    {name: 'four', parent: 'one', prop: 4}, 
    {name: 'five', parent: 'one', prop: 5}
];

ang_inc = 360 / (data.length -1);
console.log('angle: ' + ang_inc);

/*
var getAngle = function(ang) {
    return {x: Math.cos(ang), y: Math.sin(ang)};
}
*/

var getAngle = function(ang) {
    ang_in_rad = (ang * Math.PI) / 180;
    return {x: Math.cos(ang_in_rad), y: Math.sin(ang_in_rad)};
}

console.log(getAngle(90));
//r = 60; // nf: not used
base = {x: 250, y: 250};

/*
var centerX = function (d, i) {
    return (getAngle(ang_inc).x * i) * 100 + base.x;
};
      
var centerY = function (a, i) {
    return (getAngle(ang_inc).y * i) * 100+ base.y;
}
*/

var centerX = function (i) {
    return getAngle(ang_inc*i).x * ((i==0)?0:100) + base.x;
};

var centerY = function (i) {
    return getAngle(ang_inc*i).y * ((i==0)?0:100) + base.y;
};

global = d3.select('body')
    .append('svg')
    .attr('width', 1000)
    .attr('height', 1000);

var lines = global.selectAll("line")
    .data(data)
    .enter()
    .append("line")
    .style("stroke", "rgb(6,120,155)")
    .style("stroke-width", 2)
    .style('stroke-opacity', .4)
    .attr('x1', function(d, i) {return centerX(i)})
    .attr('y1', function(d, i) {return centerY(i)});

var map = global.selectAll("g")
    .data(data)
    .enter();

var circles = map
    .append("ellipse")
    .style("stroke", "gray")
    .style("fill", "aliceblue")
    .attr('data-id', function(d) { return 'one'});

var text = map
    .append("text")
    .style("font-size","14px")
    .style("font-family", "Carrois Gothic")
    .attr("text-anchor", "middle")
    .text(function(d) {return d.name})
    .attr('data-id', function(d){return 'text-' + d.name.replace(" ", "-")});

circles
    .attr('cx', function(d, i ) {return centerX(i)})
    .attr('cy', function(d, i) {return centerY(i)})
    .attr('rx', function(d)...