D3NutsAndBolts7

Use path constructors

by Simon Raper

CSS

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

JavaScript

//Set up SVG

var w = 500, h = 500;

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Draw a line

var line = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });

var data = [ {"x": 0, "y":0}, {"x": 100, "y":100}];

svg.append("path").datum(data).attr("class", "line").attr("d", line);


//Draw an arc

var radius = 200,
    radians = Math.PI/2;

var points = 50;

var angle = d3.scale.linear()
    .domain([0, points-1])
    .range([0, radians]);

var arc = d3.svg.line.radial()
    .interpolate("basis")
    .tension(0)
    .radius(radius)
    .angle(function(d, i) { return angle(i); });

svg.append("path").datum(d3.range(points)).attr("class", "line").attr("d", arc).attr("transform", "translate(0,400)");

//Calc ROI angles



//Add spokes

console.log(d3.range(0, 90, 10));

var ga = svg.append("g")
    .attr("class", "line")
  .selectAll("g")
    .data(d3.range(0, 100, 10))
  .enter().append("g")
    .attr("transform", function(d) { return "translate(0,400) rotate(" + -d + ")"; });

ga.append("line")
    .attr("x2", radius);


//Add some labels in