d3 Radarkarte - radialLine schafft Weg, aber ohne Koordinaten

Question

Dies ist wahrscheinlich eine ziemlich spezifische Frage:

Mein Problem ist, dass ich in d3.js eine radiale Diagramm erstellen müssen. Ich habe die Achse und die Etiketten erstellt. Jetzt möchte ich die radialline zeichnen. Es erstellt die Pfadobjekte in meinem HTML-Dokument, , aber ohne Koordinaten.

Ich denke, es hat etwas mit der Art und Weise zu tun, die Radius/Daten zur radialline zur Verfügung gestellt, aber kann nicht herausfinden, was zu ändern ist ... Hoffentlich sieht jemand meinen Fehler.

Ich habe auch eine 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) { \t 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

ich Ihre Geige ein wenig bearbeitet haben, damit es funktioniert:

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

Basicly, was ich Habe getan:

beheben, um das Farbschema

var colors = d3.scale.category10(); 

anstelle von

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

Daten Pfad

hinzugefügt

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

Änderungsradius

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

da Sie so etwas wie return scaledData (d.value) verwendet haben; wo Ihre skalierten Daten ein Array ist.