Dans d3.js, ignorez append () pour les données nulles

Je suis en dessinant une ligne graphique hors du petit cercle des balles. Cependant, les données de trous, qui sont représentés par la valeur null dans mon tableau. Naturellement, là où il n'y a pas de données, il ne devrait pas être cercles. Mais d3 append() méthode ajoute eux de toute façon. Comment puis-je éviter cela?

Voici un jsFiddle maquette reproduire mon problème exactement.

Je suis intéressé à ne PAS avoir cette série de cercles qui se trouvent sur l'axe des X de mon graphe, car ceux-ci sont tous nuls.

Pertinents du code de la jsfiddle lien:

svg.selectAll('circle').data(values).enter()
  .append('circle')//<-- I don't want to do this for null's
  .attr('fill', '#c00')
  .attr('r', 3)
  .attr('cx', xi)
  .attr('cy', yFlipped)

source d'informationauteur meetamit

  1. 28

    Une option est de représenter vos données différemment, de sorte que vous ne sont pas dépendantes de l'indice pour calculer l'abscisse. Par exemple, si vous représenté chaque donnée comme un objet (par exemple, {x: 0, y: 0.2840042}), alors on peut calculer les coordonnées x comme x(d.x) plutôt que x(i).

    Une autre option serait de créer un rayon de zéro lorsque la valeur est nulle, de sorte que les cercles sont cachés: circle.attr("r", function(d) { return d == null ? 0 : 3; }). Ou, vous pouvez masquer les cercles: circle.style("display", function(d) { return d == null ? "none" : null; }).

    Vous pouvez également supprimer les éléments null après l'ajout: circle.filter(function(d) { return d == null; }).remove(). Qui serait à l'œuvre pour la création initiale, mais je ne le recommande pas, car l'index pourrait changer si vous resélectionnés les éléments plus tard.

  2. 1

    Essayer ce modèle, qui peut soit supprimer ou masquer vos cercles.

    //Step 1: hides all circles which are "null"
d3.selectAll(".yourItem")
.data(data)
.enter()
    .append("circle")
    .attr("visibility", function(d,i){
        if(yourFunction(d) == null) return "hidden";
})

//Step 2: optional, deletes all circles which are "hidden"
d3.selectAll("circle[visibility=hidden]").remove();
  3. 1

    L'option la plus simple est de filtrer les valeurs null de la transmission des données à .data(…)augmentant les données pour maintenir l'index:

    svg.selectAll('circle')
  .data(values
    .map(function(v, idx) { return v == null? null : { idx: idx, value: v })
    .filter(function(v) { return v != null })
  )
  .enter()
    .append('circle')
    .attr('fill', '#c00')
    .attr('r', 3)
    .attr('cx', function(d) { return d.idx * 10 }) //or whatever
    .attr('cy', function(d) { return d.value.y }) //or whatever

    Notez que vous pouvez également suivre ce modèle de sous-éléments, même si elles ne sont pas naturellement des listes. Par exemple, considérons une situation où vous voulez conditionnelle, ajouter un deuxième cercle:

    var circles = [
{ color: 'red', cx: 30, cy: 30, subCircleColor: 'blue' },
{ color: 'blue', cx: 60, cy: 60, subCircleColor: 'green' },
{ color: 'green', cx: 90, cy: 90 },
];
//Create a group which will hold the circles, since the result will
//be:
//   <g class="circles">
//     <circle color="{{ color }}" ... />
//     <circle class="sub-circle" color="{{ subCircleColor }}" ... />
//   </g>
var circlesGroups = svg.selectAll("g.circles")
.data(circles)
.enter()
.append("g").attr({"class": "circles"})
//Add the first circle to the group
circlesGroups
.append("circle").attr({
"fill": function(d) { return d.color },
"r": 20,
"cx": function(d) { return d.cx },
"cy": function(d) { return d.cy },
})
//If there is a subCircleColor, add the second circle to the group
circlesGroups.selectAll("circle.sub-circle")
.data(function(d) {
if (d.subCircleColor)
return [d];
return [];
})
.enter()
.append("circle").attr({
"class": "sub-circle",
"fill": function(d) { return d.subCircleColor; },
"r": 10,
"cx": function(d) { return d.cx },
"cy": function(d) { return d.cy },
})

    Violon: http://jsfiddle.net/3d6e648k/

  4. 1

    Ici est une façon, si vous voulez ne jamais ajouter dans la première place. J'ai utilisé une instruction if à l'intérieur d'un .each() et puis la d3.sélectionnez(ce) à ajouter à l'élément courant.

    var data = [9, 0, 7, 0, 5, 0, 3, 0, 1];
var svg = d3.select('#svg').append('svg').attr({'viewBox': '-10 -10 99 20'});
svg.selectAll('g').data(data).enter().append('g').each(function (d,i) {
if(d){
d3.select(this).append('circle').attr({r:5,cx:(i*9)});
}else{
d3.select(this).remove();
}
});

    Voici une corbeille de http://jsbin.com/qojifug/edit?js,sortie

  5. -1

    Juste de filtrer.

    values.filter(function(el){return el !== null;})