试图从json数据中绘制一个d3饼图

Question

我正在尝试从以下 json 数据生成 d3 饼图。

{"data":[ {"Success":3412, "Pending":2107} ]} 此数据是从 sql 表中检索的。 Success 和 Pending 是 sql 表中的列标题。以下是我试图用来生成饼图的代码。

var width = 360;
var height = 360;
var outradius = Math.min(width, height) / 2;
var inradius = outradius / 1.25;

var color = d3.scale.category20b();

var svg = d3.select('#Chart')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
  .outerRadius(outradius)
  .innerRadius(inradius);
var pie = d3.layout.pie()
  .value(function (d, i) { return d.data.Success; })
  .sort(null);
var path = svg.selectAll('path')
  .data(pie(dataset.data))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', function (d, i) {
      return color(d.data.Pending);
  });

我为要绘制某列值的表格创建了 d3 饼图。但在这里我需要在一个饼图中绘制两列的值以相互比较。

上面的代码会比较所有“Success”键的值，并根据“Pending”键填充不同的颜色。但是我在 json 中只有一个 Success 和 Pending Key:value 对，我需要在饼图中比较它们。

有什么方法可以实现吗？

我读到了这个帖子：Data structure for D3 pie charts

但我不确定如何将数据传递给饼图。你能编辑我的代码 sn-p 并给我看吗？尽管我以前在 java 工作过，但我对 Web 编程还是很陌生。

亲切的问候

Answer 1

如果我理解正确，您需要更改数据，因为您的数据集中只有一个元素，success 和 pending。要比较两者，您需要像这样的两组数据：

var dataset = {
  "data": [{
    "Name": "Success",
    "Value": 3412
  }, {
    "Name": "Pending",
    "Value": 2107
  }]
}

请注意，我已经重新格式化了代码，所以你有 Name 和 Value。这样您就可以使用弧的大小值和名称作为颜色/文本。

要更改您的数据，请使用此功能：

var data = {
  "data": [{
    "Success": 3412,
    "Pending": 2107
  }]
}

var newData = [];
for (var key in data.data[0]) {
  console.log(key)
  var thisData = {
    "Name": key,
    "Value": data.data[0][key]
  }
  newData.push(thisData)
}

console.log(newData)

这会遍历您的数据并创建 D3.pie 可以读取的新数据 :)

更新代码：

var data = {
  "data": [{
    "Success": 3412,
    "Pending": 2107
  }]
}

var newData = [];
for (var key in data.data[0]) {
 // console.log(key)
  var thisData = {
    "Name": key,
    "Value": data.data[0][key]
  }
  newData.push(thisData)
}


var width = 360;
var height = 360;
var outradius = Math.min(width, height) / 2;
var inradius = outradius / 1.25;

var color = d3.scale.category10();

var svg = d3.select('#Chart')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
var arc = d3.svg.arc()
  .outerRadius(outradius)
  .innerRadius(inradius);
var pie = d3.layout.pie()
  .value(function(d, i) {
    console.log(d)
    return d.Value;
  })
  .sort(null);
var path = svg.selectAll('path')
  .data(pie(newData))
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', function(d, i) {
    return color(d.data.Name);
  });

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

</div>