În d3.js, săriți append () pentru datele null

Question

În d3.js, săriți append () pentru datele null

Aduc un grafic grafic din gloanțe mici. Cu toate acestea, datele au găuri în el, care sunt reprezentate de null în matricea mea. Firește, oriunde nu există date, nu ar trebui să existe cercuri. Dar metoda d3's append() le adaugă oricum. Cum evit asta?

Iată un mockup jsFiddle care reproduce exact problema mea.

Mă interesează NU având acea serie de cercuri care se află pe axa X a graficului meu, deoarece acestea sunt toate nulls.

Codul relevant de la linkul jsfiddle:

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)

16

adăugat 31 mai 2012 la 04:56 autor meetamit editat 18 octombrie 2016 la 11:00

Vizualizări: 3

sursa

ru fr es pt de hi bn ar

5 răspunsuri

Booking - reducere 10%

Rezervări în orice hodel.









Booking - reducere 10%
Rezervări în orice hodel.






Cea mai simplă opțiune este filtrarea nulilor din datele transmise în  .data (...) , augmentând datele pentru a menține indexul:
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

Rețineți că puteți urma, de asemenea, acest tip de subelemente individuale, chiar dacă acestea nu sunt liste naturale. De exemplu, luați în considerare o situație în care doriți să adăugați condițional un al doilea cerc:
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:
//    
//      
//      
//    
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 },
        })

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


1

adăugat 25 mai 2015 la 10:40
autor David Wolever



sursa










Booking - reducere 10%
Rezervări în orice hodel.






Doar filtrați-o.

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



1

adăugat 31 mai 2012 la 06:12
autor xdazz



sursa



Mulțumesc, dar acest lucru elimină doar acele elemente din matrice, care afectează indexul, care a trecut în funcțiile mele de setare attr (). Am nevoie ca indexul să rămână neschimbat, pentru că este ceea ce folosesc pentru a calcula pozițiile x.

adăugat 31 mai 2012 la 07:11, 
autor meetamit, 

sursa




Aceasta a fost de fapt problema mea și m-am simțit prost, fără să mă gândesc doar la filtrarea afară. Cred că am fost atât de prins în "Cum face acest lucru?" că nu m-am gândit :)

adăugat 06 noiembrie 2015 la 12:18, 
autor freeall, 

sursa











Booking - reducere 10%
Rezervări în orice hodel.
 





Încercați acest model, care vă poate șterge sau ascunde cercurile.
// 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();



1

adăugat 23 martie 2014 la 01:10
autor Monarch Wadia



sursa










Booking - reducere 10%
Rezervări în orice hodel.

autor mbostock · Answer 1 · 2012-05-31T09:42Z

O opțiune este reprezentarea datelor în mod diferit, astfel încât să nu depindeți de index pentru a calcula coordonatele x. De exemplu, dacă ați reprezentat fiecare origine ca obiect (de exemplu, {x: 0, y: 0.2840042} ), atunci ați putea calcula coordonatele x ca x (dx) > mai degrabă decât x (i) .


O altă opțiune ar fi să setați raza la zero când valoarea este nulă, astfel că cercurile sunt ascunse:  cerc.attr ("r", funcția (d) {return d == null? 0: 3; . Sau puteți ascunde cercurile:  circle.style ("display", funcția (d) {return d == null? "None": null;}) .
De asemenea, ați putea elimina elementele nula după ce le-ați adăugat:  circle.filter (funcția (d) {return d == null;}) remove() . Acest lucru ar funcționa pentru crearea inițială, dar nu aș recomanda acest lucru deoarece indexul s-ar schimba dacă ați re-selectat elementele mai târziu.

autor David Wolever · Answer 2 · 2015-05-25T10:40Z

Cea mai simplă opțiune este filtrarea nulilor din datele transmise în .data (...) , augmentând datele pentru a menține indexul:

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

Rețineți că puteți urma, de asemenea, acest tip de subelemente individuale, chiar dacă acestea nu sunt liste naturale. De exemplu, luați în considerare o situație în care doriți să adăugați condițional un al doilea cerc:

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:
//    
//      
//      
//    
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 },
        })

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

autor xdazz · Answer 3 · 2012-05-31T06:12Z

Doar filtrați-o.

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

1

adăugat 31 mai 2012 la 06:12 autor xdazz

sursa

Mulțumesc, dar acest lucru elimină doar acele elemente din matrice, care afectează indexul, care a trecut în funcțiile mele de setare attr (). Am nevoie ca indexul să rămână neschimbat, pentru că este ceea ce folosesc pentru a calcula pozițiile x.

adăugat 31 mai 2012 la 07:11, autor meetamit, sursa

Aceasta a fost de fapt problema mea și m-am simțit prost, fără să mă gândesc doar la filtrarea afară. Cred că am fost atât de prins în "Cum face acest lucru?" că nu m-am gândit :)

adăugat 06 noiembrie 2015 la 12:18, autor freeall, sursa

autor Monarch Wadia · Answer 4 · 2014-03-23T01:10Z

Încercați acest model, care vă poate șterge sau ascunde cercurile.

// 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();

autor getsetbro · Answer 5 · 2017-01-30T10:28Z

Iată o modalitate dacă nu vreți să o adăugați niciodată în primul rând. Am folosit o declarație if în interiorul unui .each() și apoi d3.select (this) pentru a o adăuga la elementul curent.

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();
 }
});

Here is a bin http://jsbin.com/qojifug/edit?js,output