Question

我试图绘制饼图。我找到了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>

Answer 1

你在这里使用第三个参数（j）：

function(d, i, j) { return arc.innerRadius(10 + cwidth * j) ...。

在d3v3中，此参数是父数据集的索引，但在d3v4中，它是dom-nodes的集合（数组）。所以你应该在某处存储父索引。以这种方式重写path变量：

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 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, i) {
      return pie(d).map(function(item) {
        return { data: item, parentIndex: i };
      });
    })
    .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);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>

嵌套饼图与d3.v4

1 个答案: