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.