d3 radar chart -- radialLine creates path but without coordinates

Question

This is probably a pretty specific question:

My problem is that in d3.js i need to create a radial chart. I created the axis and labels. Now i want to draw the radialLine. It creates the path objects in my HTML document, but without any coordinates.

I think it has something to do with the way the radius/data is provided to the radialLine, but can't figure out what to change... Hopefully someone sees my mistake.

I also created a JSfiddle: complete JSfiddle

//Data:
var notebookData = [{
  model: "Levecchio 620RE",
  data: [579, 8, 2.4, 256, 13.3]
}];

var categories = [
  "Price",
  "RAM",
  "CPU",
  "Storage",
  "Display"
];

var priceScale = d3.scaleLinear().domain([2500,300]).range([0,100]);
var ramScale = d3.scaleLinear().domain([0,32]).range([0,100]);
var cpuScale = d3.scaleLinear().domain([1.0,3.2]).range([0,100]);
var storageScale = d3.scaleLinear().domain([64,2048]).range([0,100]);
var displaySizeScale = d3.scaleLinear().domain([10.0,20.0]).range([0,100]);

function selectScale(category_name) {
    switch(category_name) {
        case "Price":
            return priceScale;
        case "RAM":
            return ramScale;
        case "CPU":
            return cpuScale;
        case "Storage":
            return storageScale;
        case "Display":
            return displaySizeScale;
    }
}

var scaledData = notebookData.map(function (el) {
    return el.data.map(function (el2, i) {                //el = 1 notebook
        return selectScale(categories[i])(el2);
    });
});
     
//My RadialLine
    
    //generatorfunction
    var radarLine = d3.radialLine()
      .radius(function(d) { return scaledData(d.value); })
      .angle(function(d,i) {	return i*angleSlice; })
      .curve(d3.curveLinearClosed)
      ;


    //Create the wrapper 
    var radarWrapper = g.selectAll(".radarWrapper")
      .data(notebookData)
      .enter().append("g")
      .attr("class", "radarWrapper")
      ;

    //Create pathlines
    radarWrapper.append("path")
      .attr("class", "radarStroke")
      .attr("d", function(d,i) { return radarLine(d); })
      .style("stroke-width", cfg.strokeWidth + "px")
      .style("stroke", function(d,i) { return cfg.color(i); })
      .style("fill", "none")
      ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

I've edited your fiddle a bit to make it work:

https://jsfiddle.net/2qgygksL/75/

Basicly what i've done:

fix the color scheme

var colors = d3.scale.category10();

instead of

var colors = d3.scale.ordinal(d3.schemeCategory10);

added data to path

radarWrapper.append("path")
          .data(scaledData)

change radius to

  .radius(function(d, i) {
        return d;
  })

since You used something like return scaledData(d.value); where your scaledData is an array.