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小提琴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)然后，您将获得一个包含三个对象的数组，其中value和key作为每个数组条目中的属性：

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

1:Object
key:"total_l"
value:74

2:Object
key:"total_a"
value:67

然后你发现值和键是错误的方式，所以这些需要在pie.value和.attr("colour"函数中交换（添加数据属性所需的限定符数据需要访问为d.data.key而不是d.key - 当您想要在之后访问它时，会将初始数据粘贴到中间“数据”属性中 - 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>属性

1 个答案: