D3.js Radar chart line drawing

Question

I am trying to create a radar chart similar to the link here ( http://www.larsko.org/v/euc/).

I was able to create axes (my work so far), but I am having a problem to draw lines in it.

For instance, if I have a list of values something like below, how can I draw a line in the radar chart?

var tempData = [56784, 5.898, 3417, 0, 0, 0]

Edit: I have included code. I am having a problem finding XY coordinates and I think XY value has to be derived from "scales".

var width = 1000,
  height = 960,
  r = (960 / 2) - 160;

var svg = d3.select("#radar")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + ", " + height / 2 + ")");

d3.csv("data/results.csv", function(data) {
      var headerNames = d3.keys(data[0]);
      headerNames.splice(0, 1); //Remove 'scenario'

      var minList = $.map(headerNames, function(h) {
          return d3.min($.map(data, function(d) {
            return d[h];
          }));
        }),

        maxList = $.map(headerNames, function(h) {
          return d3.max($.map(data, function(d) {
            return d[h];
          }));
        }),

        scales = $.map(headerNames, function(h, i) {
          return d3.scale.linear()
            .domain([minList[i], maxList[i]])
            .range([50, r]);
        }),

        axes = $.map(headerNames, function(h, i) {
          return d3.svg.axis()
            .scale(scales[i])
            .tickSize(4);
        });

      function angle(i) {
        return i * (2 * Math.PI / headerNames.length) + Math.PI / headerNames.length;
      }

      var line = d3.svg.line()
        .interpolate("cardinal-closed")
        /* computing X and Y: I am having a problem here 
        .x(function(d){ return scales(d); })
        .y(function(d){ return scales(d); }); */


      $.each(axes, function(i, a) {
          svg.append("g")
            .attr("transform", "rotate(" + Math.round(angle(i) * (180 / Math.PI)) + ")")
            .call(a)
            .selectAll("text")
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
              return "rotate(" + -angle(i) * (180 / Math.PI) + ")";
            })

          //Drawing line
          svg.selectAll(".layer")
            .data(data)
            .enter()
            .append("path")
            .attr("class", "layer")
            .attr("d", function(d) {
              return line(d);
            })

        }) // End CSV

Example results.csv scenario,n_dead_oaks,percent_dead_oaks,infected_area_ha,money_spent,area_treated_ha,price_per_oak baseline,56784,5.898,3417,0,0,0 scen2,52725,5.477,3294,382036,35,94.12071939 RS_1,58037,6.028,3407,796705,59,-635.8379888 RS_2,33571,3.487,2555,1841047,104,79.31103261 RS_3,46111,4.79,2762,1176461,61,110.227771

Answer 1

I think I have a solution for now and I appreciate all of your response! Here is my current solution for my posting.

function getRowValues(data) {
  return $.map(data, function(d, i) {
    if (i != "scenario") {
      return d;
    }
  });
}

function getCoor(data) {
  console.log(data);
  var row = getRowValues(data),
    x,
    y,
    coor = [];
  for (var i = 0; i < row.length; i++) {
    x = Math.round(Math.cos(angle(i)) * scales[i](row[i]));
    y = Math.round(Math.sin(angle(i)) * scales[i](row[i]));
    coor.push([x, y]);
  }
  return coor;
}

var line = d3.svg.line()
  .interpolate("cardinal-closed")
  .tension(0.85);

svg.selectAll(".layer")
  .data(data)
  .enter()
  .append("path")
  .attr("class", "layer")
  .attr("d", function(d) { return line(getCoor(d)) + "Z"; })
  .style("stroke", function(d, i){ return colors[i]; })
  .style("fill", "none");