Question

我正在使用d3.v4绘制一个包含以下数据集的饼图：

var InternetUsage = [{usage:"no time at all", number:3}, 
                 {usage:"less than an hour a day", number:139}, 
                 {usage:"few hours a day", number:740},
                 {usage:"most of the day", number:122}];

我希望每个切片的颜色都在一个范围内。但是运行我的代码除了显示文本标签之外什么都没有。根据我的假设，当我想从数据集中提取属性的值时，就会出现问题。像var pie = d3.pie().value(function(d) { return d.number ;});一样可能不像我预期的那样工作。但是，在这种情况下，我不知道如何修复它。

我在.js文件中写的完整代码是

var width = 950
var height = 500;
var radius = 250;

var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height);

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


var color = d3.scaleOrdinal(d3.schemeCategory20c);

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var pie = d3.pie()
    .value(function(d) { return d.number ;});


var InternetUsage = [{usage:"no time at all", number:3}, 
                     {usage:"less than an hour a day", number:139}, 
                     {usage:"few hours a day", number:740},
                     {usage:"most of the day", number:122}];

var arc = g.selectAll(".arc")
  .data(pie(InternetUsage))
  .enter()
  .append("g")
  .attr("class", "arc");

arc.append("path")
  .attr("stroke", "#fff")
  .style("fill", function(d,i) { return color(InternetUsage[i].usage); });

arc.append("text")
    .attr("transform", function(d){return "translate(" + label.centroid(d) + ")"; })
    .style("font-size","10px")
    .attr("dy", "0.35em")
    .attr('text-anchor', 'middle')
    .text(function(d,i) {return InternetUsage[i].usage; });

Answer 1

您忘了为d元素指定path属性：

arc.append("path")
  .attr("stroke", "#fff")
  .attr("d", path) // <== !!!
  .style("fill", function(d,i) { return color(InternetUsage[i].usage); });

注意我将路径生成器函数重命名为path（您将其称为arc），因为您对DOM节点使用相同的变量名称（var arc = g.selectAll(".arc")...）。 / p>

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

工作演示：

var width = 950
var height = 500;
var radius = 250;

var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var color = d3.scaleOrdinal(d3.schemeCategory20c);

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var pie = d3.pie()
    .value(function(d) { return d.number ;});


var InternetUsage = [{usage:"no time at all", number:3}, 
                     {usage:"less than an hour a day", number:139}, 
                     {usage:"few hours a day", number:740},
                     {usage:"most of the day", number:122}];

var arc = g.selectAll(".arc")
  .data(pie(InternetUsage))
  .enter()
  .append("g")
  .attr("class", "arc");

arc.append("path")
  .attr("stroke", "#fff")
  .attr("d", path)
  .style("fill", function(d,i) { return color(InternetUsage[i].usage); });

arc.append("text")
    .attr("transform", function(d){return "translate(" + label.centroid(d) + ")"; })
    .style("font-size","10px")
    .attr("dy", "0.35em")
    .attr('text-anchor', 'middle')
    .text(function(d,i) {return InternetUsage[i].usage; });

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

d3.js饼图未显示

1 个答案: