Javascript 添加<；id>+&书信电报；数据>；到D3饼图的圆弧

我碰巧使用D3js库来可视化一些SQL-JSON数据，并希望执行以下操作：

• 将单个id标签以及数据集（包含各种元素的矩阵）附加到每个切片

我现在的代码如下所示

路径{
填充：#ccc；
冲程：#333；
笔划宽度：1.5px；
过渡：填充250ms线性；
过渡延迟：150ms；
}
路径：悬停{
填写：#999；
行程：#000；
过渡延迟：0；
}
风险值数据={
{“年份”：“2017-07-01”，“价值”：“1”}，
{“年份”：“2017-07-02”，“价值”：“1”}，
{“年份”：“2017-07-03”，“价值”：“2”}，
{“年份”：“2017-07-04”，“价值”：“3”}，
{“年份”：“2017-07-05”，“价值”：“5”}，
{“年份”：“2017-07-06”，“价值”：“8”}，
{“年份”：“2017-07-07”，“价值”：“13”}，
{“年份”：“2017-07-08”，“价值”：“21”}，
{“年份”：“2017-07-09”，“价值”：“24”}，
{“年份”：“2017-07-10”，“价值”：“55”}，
{“年份”：“2017-07-11”，“价值”：“89”}，}；
可变宽度=960，
高度=500；
弧_id=d3.范围（数据.长度）；//用于命名弧
外部变量=高度/2-20，
内半径=外半径/3，
转弯半径=10；
var pie=d3.layout.pie（）
.焊盘角度（.02）；
var arc=d3.svg.arc（）
.焊盘半径（外部）
.内半径（内半径）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“id”，“viz_pieChart”）//向整个图表添加一个id
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
svg.selectAll（“路径”）
.data（pie（data.map（函数（d）{return parseInt（d.value）；}）））
.attr（“id”，函数（d，i）{console.log（'CP1'）；返回“arc-”+arc_id[i]；}）//这是为了给每个arc添加一个单独的id，但它没有
.attr（“数据”，函数（d）{return d.data；}）//根据值将数据附加到arc，例如：{“年”：“2017-07-01”，“值”：“1”}
.enter（）.append（“路径”）
.每个功能（d）{
d、 外层=外层-20；
})
.attr（“d”，弧）
.on（“鼠标悬停”，arcTween（外层，0））
单击（“click”，函数（d）{console.log（d.id）；console.log（d.data.toString（））}）//打印单击弧的id以及保存的数据
.on（“mouseout”，arcTween（outerRadius-20150））；
功能弧间（外部、延迟）{
返回函数（）{
d3.选择（this）.transition（）.delay（delay）.attrTween（“d”，函数（d）{
var i=d3.内插（d.外差，外差）；
返回函数（t）{
d、 外层=i（t）；
返回弧（d）；
};
});
};
}
//测试是否可以达到电弧，例如第二个元素
console.log（document.getElementById（'slice-1'）；//给出一个错误

必须先附加路径，然后才能为其提供id或数据

路径{
填充：#ccc；
冲程：#333；
笔划宽度：1.5px；
过渡：填充250ms线性；
过渡延迟：150ms；
}
路径：悬停{
填写：#999；
行程：#000；
过渡延迟：0；
}
风险值数据=[
{“年份”：“2017-07-01”，“价值”：“1”}，
{“年份”：“2017-07-02”，“价值”：“1”}，
{“年份”：“2017-07-03”，“价值”：“2”}，
{“年份”：“2017-07-04”，“价值”：“3”}，
{“年份”：“2017-07-05”，“价值”：“5”}，
{“年份”：“2017-07-06”，“价值”：“8”}，
{“年份”：“2017-07-07”，“价值”：“13”}，
{“年份”：“2017-07-08”，“价值”：“21”}，
{“年份”：“2017-07-09”，“价值”：“24”}，
{“年份”：“2017-07-10”，“价值”：“55”}，
{“年份”：“2017-07-11”，“价值”：“89”}]；
可变宽度=960，
高度=500；
弧_id=d3.范围（数据.长度）；//用于命名弧
外部变量=高度/2-20，
内半径=外半径/3，
转弯半径=10；
var pie=d3.layout.pie（）
.焊盘角度（.02）；
var arc=d3.svg.arc（）
.焊盘半径（外部）
.内半径（内半径）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“id”，“viz_pieChart”）//向整个图表添加一个id
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
svg.selectAll（“路径”）
.data（pie）（data.map）（函数（d）{
返回parseInt（d.value）；
})))
.enter（）.append（“路径”）
.每个功能（d）{
d、 外层=外层-20；
})
.attr（“id”，函数（d，i）{return“arc-”+arc_id[i]；}）
//这是为了给每个弧添加一个单独的id，但它没有
.attr（“数据”，函数（d）{return d.data；}）//根据值将数据附加到arc，例如：{“年”：“2017-07-01”，“值”：“1”}
.attr（“d”，弧）
.on（“鼠标悬停”，arcTween（外层，0））
.打开（“单击”，功能（d）{
console.log（this.id）；
console.log（d.data.toString（））
})//打印单击弧的id以及保存的数据
.on（“mouseout”，arcTween（outerRadius-20150））；
功能弧间（外部、延迟）{
返回函数（）{
d3.选择（this）.transition（）.delay（delay）.attrTween（“d”，函数（d）{
var i=d3.内插（d.外差，外差）；
返回函数（t）{
d、 外层=i（t）；
返回弧（d）；
};
});
};
}
//测试是否可以达到电弧，例如第二个元素
console.log（document.getElementById（'slice-1'）；//给出一个错误

你已经说过你想做什么，但你的问题是什么？张贴的代码有问题吗？它的输出是什么？期望的输出是什么？谢谢tima，我把我的问题和代码都做得更精确了。现在，代码不起作用了。特别是每个弧的id和数据的附加/寻址不起作用。对于每个弧上的id，您可以只返回“arc-”+i；然后你会得到arc-1，arc-2，arc-3，。。。嗨，青蛙，谢谢你的提示。它起作用了！：）现在只是一个小补充：我如何确保