D3.js 带d3.v4的嵌套饼图_D3.js_Pie Chart

D3.js 带d3.v4的嵌套饼图

d3.js

D3.js 带d3.v4的嵌套饼图,d3.js,pie-chart,D3.js,Pie Chart,我在画饼图。我找到了d3.v3中可用的工作示例。从那时起，我已经将d3版本更新为d3.v4，图表不起作用试图找出答案，但没有找到解决方案。有人能在这里提出这个代码有什么问题吗 <!DOCTYPE html> <html> <head> <title>Pie</title> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></

我在画饼图。我找到了d3.v3中可用的工作示例。从那时起，我已经将d3版本更新为d3.v4，图表不起作用

试图找出答案，但没有找到解决方案。有人能在这里提出这个代码有什么问题吗

<!DOCTYPE html>
<html>
<head>
  <title>Pie</title>
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

</body>
</html>

<script type="text/javascript">
  var dataset = {
  apples: [53245, 28479, 19697, 24037, 40245, 34234],
  oranges: [53245, 28479, 19697, 24037, 40245, 34234],
  lemons: [53245, 28479, 19697, 24037, 40245, 34234],
  pears: [53245, 28479, 19697, 24037, 40245, 34234],
  banana: [53245, 28479, 19697, 24037, 40245, 34234],
  pineapples: [53245, 28479, 19697, 24037, 40245, 34234],
};

var width = 460,
    height = 300,
    cwidth = 25;


// d3.v3
/* 
var color = d3.scale.category20();
var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc();
*/

// d3.v4
var color = d3.scaleOrdinal(d3.schemeCategory10);
var pie = d3.pie().sort(null);
var arc = d3.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

</script>


馅饼
变量数据集={
苹果：[532452847919697240374024534234]，
橙子：[532452847919697240374024534234]，
柠檬：[532452847919697240374024534234]，
梨：[532452847919697240374024534234]，
香蕉：[532452847919697240374024534234]，
菠萝：[532452847919697240374024534234]，
};
可变宽度=460，
高度=300，
cwidth=25；
//d3.v3
/* 
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）.sort（null）；
var arc=d3.svg.arc（）；
*/
//d3.v4
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var pie=d3.pie（）.sort（null）；
var arc=d3.arc（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var gs=svg.selectAll（“g”）.data（d3.values（dataset））.enter（）.append（“g”）；
var path=gs.selectAll（“路径”）
.data（函数（d）{return pie（d）；}）
.enter（）.append（“路径”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“d”，函数（d，i，j）{返回弧内半径（10+cwidth*j）。外半径（cwidth*（j+1））（d）；}；

在这里使用第三个参数（

）：

函数（d，i，j）{返回弧内半径（10+cwidth*j）..

在d3v3中，此参数是父数据集的索引，但在d3v4中，它是dom节点的集合（数组）。因此，您应该将父索引存储在某个位置。请按以下方式重写

路径

变量：

var path = gs.selectAll("path")
    .data(function(d, i) {
      return pie(d).map(function(item) {
        return { data: item, parentIndex: i }; // save parent dataset index in parenIndex property
      });
    })
    .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i) { 
      return arc
        .innerRadius(10+cwidth*d.parentIndex)
        .outerRadius(cwidth*(d.parentIndex+1))(d.data);
    });

检查工作示例：

var数据集={
苹果：[532452847919697240374024534234]，
橙子：[532452847919697240374024534234]，
柠檬：[532452847919697240374024534234]，
梨：[532452847919697240374024534234]，
香蕉：[532452847919697240374024534234]，
菠萝：[532452847919697240374024534234]，
};
可变宽度=460，
高度=300，
cwidth=25；
//d3.v3
/* 
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）.sort（null）；
var arc=d3.svg.arc（）；
*/
//d3.v4
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var pie=d3.pie（）.sort（null）；
var arc=d3.arc（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var gs=svg.selectAll（“g”）.data（d3.values（dataset））.enter（）.append（“g”）；
var path=gs.selectAll（“路径”）
.数据（功能（d，i）{
返回饼图（d）.映射（函数（项）{
返回{data:item，parentIndex:i}；
});
})
.enter（）.append（“路径”）
.attr（“fill”，函数（d，i）{返回颜色（i）；}）
.attr（“d”，函数（d，i）{
返回弧
.innerRadius（10+cwidth*d.parentIndex）
.outerRadius（cwidth*（d.parentIndex+1））（d.data）；
})；