尝试根据 json 数据绘制 d3 饼图

Question

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

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

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);
  });

我为 tables 创建了 d3 饼图，我在其中绘制了特定列的值。但在这里我需要在一个饼图中绘制两列的值以相互比较。

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

有什么办法可以实现吗？

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

但我不确定如何将数据传递给饼图。你能编辑我的代码片段并展示给我看吗？尽管我之前在 java 工作过，但我对网络编程还是很陌生。

亲切的问候

Answer 1

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

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

请注意，我已重新格式化代码，因此您有 Name 和 Value。这样您就可以使用圆弧大小的值和名称作为 colour/text.

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

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>

尝试根据 json 数据绘制 d3 饼图

Trying to draw a d3 pie chart from json data

javascript

d3.js

pie-chart