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

Question

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

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

我认为这与 radius/data 提供给 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) { 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

我对您的 fiddle 进行了一些编辑以使其正常工作：

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

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

d3 radar chart -- radialLine creates path but without coordinates

javascript

path

radar-chart

d3.js