Javascript 转换圆弧时出错：<；路径>；属性d：预期的弧标志（'；0'；或'；1'；）

我到处寻找解决方案，我尝试了所有方法，但没有任何效果

当我单击以更新数据和饼图时，转换无法正常工作，并打印错误（错误：属性d：预期的弧标志（'0'或'1'））超过100次。 有人能帮我吗

这是守则的要点：

// set the dimensions and margins of the graph
var width = 320
    height = 450
    margin = 40

// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
var radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'my_dataviz'
var svg = d3.select("#recipe-graph")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// create 2 data_set
//Aromatic Profile
//a: woody, b: floral, c: resinous, d: herbaceus, e: citrus, f: minty, 
var data1 = {a:56.2, b: 25, c:18.8} //woody, floral, resinous
var data2 = {b: 31.2, d: 50, e:18.8} //floral, herbaceus, citus
var data3 = {d: 33.3, e:11.1, f: 55.6} //herbaceous, citrus, minty
var data4 = {b: 56.2, c: 43.8} //floral, resinous
var data5 = {b: 82.6, e: 17.4} //floral, citrus

// set the color scale
var color = d3.scaleOrdinal()
  .domain(["a", "b", "c", "d", "e", "f"])
  .range(d3.schemeDark2);

我相信问题就在下面的某个地方。（我正在使用最新的d3.js库）

---

这在D3API中并没有很好的文档记录，但您可以在网上找到几个如何转换arc的示例。您面临的最大问题（以及出现错误的原因）是SVG

d

属性是一个长而复杂的字符串，而

transition.attr

提供的默认插值器是

d3.interpolateString

，它不知道如何插值

解决方案是使用带有自定义插值器的

attrween

。要使其工作，必须保存每个图元的先前基准。为此，我喜欢使用局部变量：

var local = d3.local();

selection.each(function(d) {
    local.set(this, d)
})

然后，在

attrween

中：

transition.attrTween('d', function(d) {
  var i = d3.interpolate(local.get(this), d);
  local.set(this, i(0));
  return function(t) {
    return arc(i(t));
  };
})

这是您的代码，正在从

data1

转换到

data2

：

//设置图形的尺寸和边距
可变宽度=320
高度=450
保证金=40
//pieplot的半径为宽度的一半或高度的一半（最小值）。我减去一点边距。
变量半径=数学最小值（宽度、高度）/2-边距
var local=d3.local（）；
//将svg对象附加到名为“my_dataviz”的div中
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//创建2个数据集
//芳香分布
//a:木质，b:花，c:树脂，d:草本，e:柑橘，f:薄荷，
变量数据1={
a:56.2，
b:25，
c:18.8
}//木质、花状、树脂状
变量数据2={
b:31.2，
d:50，
e:18.8
}//花卉、草本植物、黄鼠
变量数据3={
d:33.3，
e:11.1，
f:55.6
}//草本、柑橘、薄荷
变量数据4={
b:56.2，
c:43.8
}//花的，树脂的
变量数据5={
b:82.6，
e:17.4
}//花卉、柑橘类
//设置颜色比例
var color=d3.scaleOrdinal（）
.域名（[“a”、“b”、“c”、“d”、“e”、“f”]）
.范围（d3.schemeDark2）；
var arc=d3.arc（）
.内半径（0）
.外部（半径）
//为给定变量创建/更新绘图的函数：
功能更新（数据）{
//计算每个组在饼图上的位置：
var pie=d3.pie（）
.价值（功能（d）{
返回d值；
})
.排序（功能（a、b）{
返回d3.升序（a键，b键）；
})//这确保饼图中的组顺序保持不变
var data_ready=pie（d3.条目（数据））
//映射到数据
var u=svg.selectAll（“路径”）
.数据（数据准备就绪）
//构建饼图：基本上，饼图的每个部分都是我们使用arc函数构建的路径。
U
.输入（）
.append（'路径'）
.每个功能（d）{
local.set（此，d）
})
.合并（u）
.transition（）
.持续时间（1000）
.attrween（'d'，函数（d）{
var i=d3.interpolate（local.get（this），d）；
local.set（这个，i（0））；
返回函数（t）{
返回弧（i（t））；
};
})
.attr（'fill'，函数（d）{
返回（颜色（d.data.key））
})
.attr（“笔划”、“白色”）
.style（“笔划宽度”、“2px”）
.style（“不透明度”，1）
//删除不再存在的组
U
.exit（）
.删除（）
}
//使用第一个数据集初始化绘图
更新（数据1）
d3.超时（函数（）{
更新（数据2）
}, 1000);

transition.attrTween('d', function(d) {
  var i = d3.interpolate(local.get(this), d);
  local.set(this, i(0));
  return function(t) {
    return arc(i(t));
  };
})