Question

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

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

我认为这与radius / data提供给radialLine的方式有关，但无法弄清楚要改变的内容...... 希望有人看到我的错误。

我还创建了一个JSfiddle： complete JSfiddle

＆＃13;

//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")
      ;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

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

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

1 个答案: