d3雷達圖 - 徑線創建路徑但沒有座標

Question

這可能是一個非常具體的問題：

我的問題是，在d3.js我需要創建一個徑向圖。 我創建了軸和標籤。 現在我想繪製radialLine。 它在我的HTML文檔 中創建路徑對象，但沒有任何座標。

我認爲這與半徑/數據提供給radialline的方式有關，但無法弄清楚要更改什麼...... 希望有人看到我的錯誤。

我還創建了一個的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

我已經編輯您的撥弄了一下，使其工作：

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

Basicly我已完成：

固定的顏色方案

var colors = d3.scale.category10(); 

代替

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

加入數據路徑

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

變化半徑

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

因爲你使用了類似return scaledData（d.value）;你的scaledData是一個數組。