javascript - 使用 .csv 文件的带内环的 D3.js 圆环图

Question

我的问题与此处提出的问题类似:D3.js - Donut charts with multiple rings

在这个问题中，在发布的 jsFiddle 中使用了嵌套数组来绘制内环: http://jsfiddle.net/Qh9X5/154/引用作为问题的解决方案。

我正在尝试实现带有内环的圆环图，但这次使用 csv 文件。这是我当前的代码:

var margin = {top: 20, right: 30, bottom: 30, left: 30},
	width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    donutWidth = 50;
    //radius = Math.min(width, height) / 2;

var color = d3.scale.category10();	

var pie = d3.layout.pie()
    //.value(function(d){ return d.count;})
    .sort(null);

var arc = d3.svg.arc();
    //.innerRadius(radius - donutWidth)
    //.outerRadius(radius - 50);

var chart1 = d3.select("#chartArea1").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); 

d3.csv("data/svm-prediction.csv", function(error, data) {
  if (error) throw error;

  var classNames = d3.keys(data[0]).filter(function(key) { return key !== "Class"; });

  data.forEach(function(d) {
      d.predValues = classNames.map(function(name) { return {name: name, value: +d[name]}; });
  });

  var gs = chart1.selectAll("g").data(d3.values(function(d){ return d.predValues; })).enter().append("g");

  var path = gs.selectAll('path')
        .data(function(d){ return pie(d); })
      .enter().append('path')
        .attr('d', function(d, i , j) { return
          arc.innerRadius(10+donutWidth*j).outerRadius(donutWidth*(j+1))(d);
        })
        .attr('fill', function(d, i) { return color(d.data.Class); });

});

我继续运行代码，但它没有显示在网页上。我试图显示预测类和实际类的计数，按类名称分组。请帮忙。

这是 csv 文件的格式:

Class,Actual_Class,Predicted_Class,Accuracy
Class A,495,495,100
Class B,495,492,99
Class C,495,495,100
Class D,495,495,100
Class E,495,495,100

Answer 1

与您发布的 fiddle 类似，让我们尝试将从 csv 获得的数据转换为实际值和预测值的数据数组。我确信可能有更好的方法来做到这一点，但简单、直接的方法如下:

var donutData = new Array,
    actualValues = new Array,
    predValues = new Array;

data.forEach(function(d) {
  actualValues.push(d.Actual_Class);
  predValues.push(d.Predicted_Class);
});

donutData.push(actualValues);
donutData.push(predValues);

您不必对类名和所有内容进行过滤。我们创建的 DonutData 对象(二维数组)可以直接用于创建圆环图。接下来，在创建 gs 时，您尝试使用绑定(bind)数据，但在此之前没有实际绑定(bind)任何数据。因此，将该行替换为:

var gs = chart1.selectAll("g").data(donutData).enter().append("g");

现在我们已经将数据很好地绑定(bind)到 g 标签(每个类一个)，我们可以继续创建圆环图:

var path = gs.selectAll('path')
    .data(function(d){ return pie(d); })
  .enter().append('path')
    .attr('d', function(d, i , j) { 
      return arc.innerRadius(10+donutWidth*j).outerRadius(donutWidth*(j+1))(d);
    })
    .attr('fill', function(d, i) { return color(i); });

请注意，我使用了 pie(d) 来选择我们构造的相应数组。另外，我只是将 i 传递给 color() 来生成不同的颜色。 d3.csv() 部分看起来像这样:

d3.csv("data.csv", function(error, data) {
  if (error) console.log("error reading csv");

  var donutData = new Array,
      actualValues = new Array,
      predValues = new Array;    

  data.forEach(function(d) {
      actualValues.push(d.Actual_Class);
      predValues.push(d.Predicted_Class);
  });

  donutData.push(actualValues);
  donutData.push(predValues);

  var gs = chart1.selectAll("g").data(donutData).enter().append("g");

  var path = gs.selectAll('path')
        .data(function(d){ return pie(d); })
      .enter().append('path')
        .attr('d', function(d, i , j) { 
          return arc.innerRadius(10+donutWidth*j).outerRadius(donutWidth*(j+1))(d);
        })
        .attr('fill', function(d, i) { return color(i); });

});

希望这就是您真正想要的。