首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在d3.js v3中的现有g元素中添加更多元素

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

Stack Overflow用户
提问于 2018-07-31 04:40:01
回答 1查看 406关注 0票数 0

我有一个基于这个的d3 v3饼图:Aster Plot on D3

我设法在现有的pie部件中添加了另一个部件,但不能将该部件添加到同一个g标记中。最后一件事需要帮助。我一直在读这个tutorial,但它只创建了g标签,并没有添加新的元素。

PS:对不起,我的英语,不是我的母语。

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

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
.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;    
}
代码语言:javascript
复制
<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>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-31 05:22:04

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

然后将所需的path附加到此选定内容。

代码语言:javascript
复制
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);

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
.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;    
}
代码语言:javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51601973

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档