d3雷达图 -- 径向线创建路径但没有坐标

Question

这可能是一个非常具体的问题：

我的问题是在 d3 中.js我需要创建一个径向图。 我创建了轴和标签。 现在我想画径向线。 它在我的 HTML 文档中创建路径对象， 但没有任何坐标。

我认为这与半径/数据提供给径向线的方式有关，但不知道要更改什么...... 希望有人看到我的错误。

我还创建了一个JSfiddle： 完整的 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

我已经编辑了你的小提琴以使其工作：

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

基本上我做了什么：

修复配色方案

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 是一个数组。