Javascript 如何向d3.js v3中现有的g元素添加更多元素

我有一个

d3v3

饼图，基于此：。
我设法在现有的饼图部分中添加了另一个部分，但无法将该部分添加到相同的

g

标记中。最后一件事需要帮助。我一直在读这篇文章，但是这里只创建了

g

标记，没有添加新元素

对不起，我的英语不是我的母语

下面是我正在编写的代码：

var数据=[
{
“id”：251，
“项目id”：6，
“区域id”：1，
“名称”：“塔里亚1号”，
“fecha_inicio”：{
“日期”：“2018-07-10 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino_原件”：{
“日期”：“2018-07-17 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino”：{
“日期”：“2018-07-17 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“atraso”：0，
“先锋”：35岁，
“重量”：1，
“宽度”：1
},
{
“id”：252，
“项目id”：6，
“区域id”：1，
“名称”：“塔里亚2号”，
“fecha_inicio”：{
“日期”：“2018-07-09 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino_原件”：{
“日期”：“2018-07-16 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino”：{
“日期”：“2018-07-16 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“atraso”：0，
“先锋”：70，
“重量”：1，
“宽度”：1
},
{
“id”：253，
“项目id”：6，
“区域id”：5，
“名称”：“塔里亚3号”，
“fecha_inicio”：{
“日期”：“2018-07-09 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino_原件”：{
“日期”：“2018-07-13 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino”：{
“日期”：“2018-07-13 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“atraso”：0，
“先锋”：35岁，
“重量”：1，
“宽度”：1
},
{
“id”：254，
“项目id”：6，
“区域id”：6，
“名称”：“塔里亚4号”，
“fecha_inicio”：{
“日期”：“2018-07-23 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino_原件”：{
“日期”：“2018-07-27 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino”：{
“日期”：“2018-07-27 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“atraso”：0，
“先锋”：95，
“重量”：1，
“宽度”：1
}
]
///////////////////////////////
可变宽度=500，
高度=500，
半径=数学最小值（宽度、高度）/2，
内半径=0*半径//国际无线电电路
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d.width；
});
var arc=d3.svg.arc（）
.innerRadius（innerRadius）
.外层（功能（d）{
返回（半径-内半径）*（d.data.avance/100.0）+内半径；
});
var outlineArc=d3.svg.arc（）
.innerRadius（innerRadius）
.外层（半径）；
var svg=d3.选择（“grafico”）.追加（“svg”）
//.attr（“宽度”，宽度）
//.attr（“高度”，高度）
.attr（'视图框'，“0 0”+500+”+500）
.style（“边框”，“1px纯灰”）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
试一试{
data.forEach（函数（d）{
d、 id=d.id；
d、 proyecto_id=d.proyecto_id；
d、 区域id=d.区域id；
d、 nombre=d.nombre；
d、 fecha_inicio.date=d.fecha_inicio.date；
d、 fecha_termino_original.date=d.fecha_termino_original.date；
d、 fecha_termino.date=d.fecha_termino.date；
d、 atraso=d.atraso；
d、 前卫=d.前卫；
d、 重量=1；
d、 宽度=+d.重量；
});
}捕获（类型错误）{
控制台日志（“错误”）；
}
var j=0；
var outerPath=svg.selectAll（“.outlineArc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“部分”）
.append（“路径”）
.attr（“填充”，计算颜色）
.attr（“笔划”、“灰色”）
.attr（“类”、“大纲C”）
.attr（“d”，c）；
var path=svg.selectAll（.solidArc”）.select（.parte）
.数据（pie（数据））
.enter（）.append（“路径”）
.attr（“填充”，“#074590”）
.attr（“类”、“solidArc”）
.attr（“笔划”、“灰色”）
.attr（“d”，弧）；
//计算加权平均先锋
var avance=
数据减少（功能（a，b）{
返回a+（b.前卫*b.重量）；
}, 0) /
数据减少（功能（a，b）{
返回a+b权重；
}, 0);
函数计算颜色（d）{
var hoy=新日期（）；
var fechaActividad=新日期（d.data.fecha_termino.Date）；
var diferencia=两天之间的天数（hoy，FECHA）；
//控制台日志（差异）；
如果（差异<0）{
返回“#cc0000”//rojo
}
如果（差异<7&&diferenceia>=0）{
返回“#ff9900”//naranjo
}
如果（差异>=7）{
返回“#009900”//verde
}
}
功能治疗ASUTC（日期）{
var结果=新日期（日期）；
result.setMinutes（result.getMinutes（）-result.getTimezoneOffset（））；
返回结果；
}
函数日期之间（开始日期、结束日期）{
var毫秒Sperday=24*60*60*1000；
返回（treatAsUTC（endDate）-treatAsUTC（startDate））/毫秒/天；
}

.outlineArc:hover、.solidArc:hover{
填充物：青色；
}
.solidArc、.outlineArc{
-moz转换：全部为0.3s；
-o-过渡：均为0.3s；
-webkit转换：所有0.3；
过渡：均为0.3秒；
}

---

您必须使用类

parte

保存组

然后将所需的

路径添加到此选择中

var outerPath = svg.selectAll(".outlineArc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "parte");

outerPath.append("path")
  .attr("fill", calcularColor)
  .attr("stroke", "grey")
  .attr("class", "outlineArc")
  .attr("d", outlineArc);

outerPath.append("path")
  .attr("fill", "#074590")
  .attr("class", "solidArc")
  .attr("stroke", "grey")
  .attr("d", arc);


var数据=[
{
“id”：251，
“项目id”：6，
“区域id”：1，
“名称”：“塔里亚1号”，
“fecha_inicio”：{
“日期”：“2018-07-10 00:00:00.000000”，
“时区类型”：3，
“时区”：“UTC”
},
“fecha_termino_原件”：{
“日期”