d3.js 饼图 <path> 属性无效

Question

我的 d3.layout.pie() 在我的路径属性上抛出一个错误。

Error: Invalid value for <path> attribute d="M2.9314982754589766e-15,-47.875A47.875,47.875 0 1,1 NaN,NaNLNaN,NaNA27.875,27.875 0 1,0 1.7068514763116235e-15,-27.875Z"

JS Fiddle https://jsfiddle.net/Nyquist212/pggtfafy/

任何人都可以帮助我理解我做错了什么吗？

var data  = [{total_s: 22, total_l: 74, total_a: 67}];

var height      = 250
  , width       = 250
  , color       = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888"])
  , radius      = Math.min(width, height) / 2
  ;

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

var pie = d3.layout.pie()
    .value(function(d){return d.key;})
    .sort(null)

var svg3 = d3.select("#sunday")
    .append("svg:svg")
    .attr("width", width)
    .attr("height", height * .5)
    .append("g")
    .attr("transform", "translate(" + (width/8) + "," + (height/4) + ")")

var path = svg3.selectAll('path')
    .data(pie(data))
    .enter()
    .append("path")
    .attr("d", arc)
    .attr("fill", function(d){return color(d.value)});

Answer 1

Pie 需要一个对象数组作为数据，但目前您有一个单元素数组，其中一个对象在该单个元素中具有三个属性。如果你这样做 var data = d3.entries(data) 然后你会得到一个包含三个对象的数组，每个数组条目中都有值和键作为属性：

Array[3]
0:Object
key:"total_s"
value:22

1:Object
key:"total_l"
value:74

2:Object
key:"total_a"
value:67

然后你会发现 value 和 key 是错误的方式，因此需要在 pie.value 和 .attr("colour" 函数中交换它们（为数据所需的颜色属性添加限定符以 d.data.key 而不是 d.key 的形式访问 - 当您以后要访问它时，馅饼会将初始数据粘在中间 'data' 属性中 - https://github.com/mbostock/d3/wiki/Pie-Layout#_pie)

var pie = d3.layout.pie()
    .value(function(d){return d.value;})
    .sort(null)

...

    .attr("fill", function(d){return color(d.data.key)});

https://jsfiddle.net/pggtfafy/10/

d3.js 饼图 <path> 属性无效

d3.js Pie Chart invalid <path> attribute

path

d3.js

pie-chart