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

时间：2018-07-30 20:40:01

标签： javascript html d3.js svg

我有一个d3 v3饼图（种类），基于此：Aster Plot on D3。
我设法在现有的饼形零件中添加了另一个零件，但是无法在相同的g标签中添加该零件。在这最后一件事上需要帮助。我已经阅读了tutorial，但是在那里仅创建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>

1 个答案:

答案 0 :(得分：0)

您必须使用parte类保存该组。

然后将所需的path附加到此选择中。

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>

相关问题
最新问题