javascript - 如何在 d3.js v3 中向现有 g 元素添加更多元素
问题描述
我有一个d3 v3
饼图(有点),基于此:Aster Plot on D3。
我设法在现有的饼图部分中添加了另一个部分,但我无法在同一个g
标签内添加该部分。最后一件事需要帮助。我一直在阅读本教程,但那里只创建g
标签而不在那里添加新元素。
PS:对不起,我的英语不是我的母语。
这是我正在处理的代码:
var data = [
{
"id": 251,
"proyecto_id": 6,
"area_id": 1,
"nombre": "Tarea 1",
"fecha_inicio": {
"date": "2018-07-10 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-17 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-17 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 35,
"weight": 1,
"width": 1
},
{
"id": 252,
"proyecto_id": 6,
"area_id": 1,
"nombre": "Tarea 2",
"fecha_inicio": {
"date": "2018-07-09 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-16 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-16 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 70,
"weight": 1,
"width": 1
},
{
"id": 253,
"proyecto_id": 6,
"area_id": 5,
"nombre": "Tarea 3",
"fecha_inicio": {
"date": "2018-07-09 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-13 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-13 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 35,
"weight": 1,
"width": 1
},
{
"id": 254,
"proyecto_id": 6,
"area_id": 6,
"nombre": "Tarea 4",
"fecha_inicio": {
"date": "2018-07-23 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-27 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-27 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 95,
"weight": 1,
"width": 1
}
]
///////////////////////////////
var width = 500,
height = 500,
radius = Math.min(width, height) / 2,
innerRadius = 0 * radius; //radio circulo interno
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.width;
});
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function(d) {
return (radius - innerRadius) * (d.data.avance / 100.0) + innerRadius;
});
var outlineArc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
var svg = d3.select("#grafico").append("svg")
//.attr("width", width)
//.attr("height", height)
.attr('viewBox', "0 0 " + 500 + " " + 500)
.style("border", '1px solid grey')
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
try {
data.forEach(function(d) {
d.id = d.id;
d.proyecto_id = d.proyecto_id;
d.area_id = d.area_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.avance = d.avance;
d.weight = 1;
d.width = +d.weight;
});
} catch (TypeError) {
console.log("Error");
}
var j = 0;
var outerPath = svg.selectAll(".outlineArc")
.data(pie(data))
.enter().append("g")
.attr("class", "parte")
.append("path")
.attr("fill", calcularColor)
.attr("stroke", "grey")
.attr("class", "outlineArc")
.attr("d", outlineArc);
var path = svg.selectAll(".solidArc").select(".parte")
.data(pie(data))
.enter().append("path")
.attr("fill", "#074590")
.attr("class", "solidArc")
.attr("stroke", "grey")
.attr("d", arc);
// calculate the weighted mean avance
var avance =
data.reduce(function(a, b) {
return a + (b.avance * b.weight);
}, 0) /
data.reduce(function(a, b) {
return a + b.weight;
}, 0);
function calcularColor(d) {
var hoy = new Date();
var fechaActividad = new Date(d.data.fecha_termino.date);
var diferencia = daysBetween(hoy, fechaActividad);
//console.log(diferencia);
if (diferencia < 0) {
return "#cc0000"; //rojo
}
if (diferencia < 7 && diferencia >= 0) {
return "#ff9900"; //naranjo
}
if (diferencia >= 7) {
return "#009900"; //verde
}
}
function treatAsUTC(date) {
var result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 24 * 60 * 60 * 1000;
return (treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay;
}
.outlineArc:hover, .solidArc:hover{
fill: cyan;
}
.solidArc, .outlineArc {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="graficoBotones">
<div id="zoom" class="col-6">
<div class="small">
<div id="grafico"></div>
</div>
</div>
</div>
解决方案
您必须将 group 与 class 一起保存parte
。
path
然后将您需要的 s 附加到此选择中。
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 data = [
{
"id": 251,
"proyecto_id": 6,
"area_id": 1,
"nombre": "Tarea 1",
"fecha_inicio": {
"date": "2018-07-10 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-17 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-17 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 35,
"weight": 1,
"width": 1
},
{
"id": 252,
"proyecto_id": 6,
"area_id": 1,
"nombre": "Tarea 2",
"fecha_inicio": {
"date": "2018-07-09 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-16 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-16 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 70,
"weight": 1,
"width": 1
},
{
"id": 253,
"proyecto_id": 6,
"area_id": 5,
"nombre": "Tarea 3",
"fecha_inicio": {
"date": "2018-07-09 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-13 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-13 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 35,
"weight": 1,
"width": 1
},
{
"id": 254,
"proyecto_id": 6,
"area_id": 6,
"nombre": "Tarea 4",
"fecha_inicio": {
"date": "2018-07-23 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino_original": {
"date": "2018-07-27 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"fecha_termino": {
"date": "2018-07-27 00:00:00.000000",
"timezone_type": 3,
"timezone": "UTC"
},
"atraso": 0,
"avance": 95,
"weight": 1,
"width": 1
}
]
///////////////////////////////
var width = 500,
height = 500,
radius = Math.min(width, height) / 2,
innerRadius = 0 * radius; //radio circulo interno
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.width;
});
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(function(d) {
return (radius - innerRadius) * (d.data.avance / 100.0) + innerRadius;
});
var outlineArc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(radius);
var svg = d3.select("#grafico").append("svg")
//.attr("width", width)
//.attr("height", height)
.attr('viewBox', "0 0 " + 500 + " " + 500)
.style("border", '1px solid grey')
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
try {
data.forEach(function(d) {
d.id = d.id;
d.proyecto_id = d.proyecto_id;
d.area_id = d.area_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.avance = d.avance;
d.weight = 1;
d.width = +d.weight;
});
} catch (TypeError) {
console.log("Error");
}
var j = 0;
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);
// calculate the weighted mean avance
var avance =
data.reduce(function(a, b) {
return a + (b.avance * b.weight);
}, 0) /
data.reduce(function(a, b) {
return a + b.weight;
}, 0);
function calcularColor(d) {
var hoy = new Date();
var fechaActividad = new Date(d.data.fecha_termino.date);
var diferencia = daysBetween(hoy, fechaActividad);
//console.log(diferencia);
if (diferencia < 0) {
return "#cc0000"; //rojo
}
if (diferencia < 7 && diferencia >= 0) {
return "#ff9900"; //naranjo
}
if (diferencia >= 7) {
return "#009900"; //verde
}
}
function treatAsUTC(date) {
var result = new Date(date);
result.setMinutes(result.getMinutes() - result.getTimezoneOffset());
return result;
}
function daysBetween(startDate, endDate) {
var millisecondsPerDay = 24 * 60 * 60 * 1000;
return (treatAsUTC(endDate) - treatAsUTC(startDate)) / millisecondsPerDay;
}
.outlineArc:hover, .solidArc:hover{
fill: cyan;
}
.solidArc, .outlineArc {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="graficoBotones">
<div id="zoom" class="col-6">
<div class="small">
<div id="grafico"></div>
</div>
</div>
</div>
推荐阅读
- javascript - 在 Vue3 和 vue-router4(next) 的 setup() 中使用 useRoute() 时,路由查询未定义
- c - C - 释放使用 malloc 分配的内存
- pandas - 在 Pandas 中将项目从一列映射到新列的有效方法
- android - Flutter 应用程序在后台保持运行
- python - 如何从 matplotlib Table 对象的每个单元格中获取文本值?
- javascript - 导航栏中左侧或右侧按钮的 HTML 滑块 Vuejs
- css - CSS旋转不起作用@media查询在旋转后不会变回
- python - 导出同步与异步 python 应用程序的普罗米修斯指标
- google-calendar-api - 谷歌日历 API + 服务帐户 + PHP cURL
- python - scRNA-seq:如何使用预先计算的 PCA 分数/负载来使用 TSNE python 实现?