这可能是一个非常具体的问题：
我的问题是在 d3.js 中我需要创建一个径向图表。我创建了轴和标签。现在我想绘制radialLine。它在我的 HTML 文档中创建路径对象，但没有任何坐标。
我认为这与向radialLine提供半径/数据的方式有关，但无法弄清楚要更改什么......希望有人看到我的错误。
我还创建了一个 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>我对您的小提琴进行了一些编辑以使其正常工作：
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 是一个数组。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句