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饼图，我正在绘制某个列的值。但在这里，我需要在一个饼图中绘制两列的值，以便相互比较。

上述代码将比较所有“成功”键的值，并根据“待定”键填充不同的颜色。但我只有一个成功和待定键：json中的值对，我需要在饼图中对它们进行比较。

有没有办法实现这个目标？

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

但我不确定如何将数据传递给馅饼。你能编辑我的代码片段并告诉我吗？我是网络编程的新手，尽管我之前曾在java工作过。

亲切的问候

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读取的新数据：）

更新的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: