Pourquoi la mise à jour de sélection ne fonctionne pas lorsque je les passe dans une autre fonction?

Question

Je souhaite utiliser la sélection plusieurs fois. mais la méthode de mise à jour ne fonctionne pas. pourquoi cela arrive-t-il?

La première sélection ne peut-elle pas accepter plus de deux liaisons séquentielles?

// 1. prepair data 
var enterData = [120, 70, 300, 80, 220]; 
var updateData = [300, 0, 30, 70, 320]; 
var exitData = [300, 80, 90, 40]; 

// 2. select virtual element and assign it variable 
var rects = d3.select("#myGraph") 
    .selectAll("rect"); 

// 3. enter method working. 
function enter (rects, data){ 
    console.log("enter method!"); 
    rects.data(data) 
    .enter() 
    .append("rect") 
    .attr("class", "bar") 
    .attr("width", function(d,i){ 
    return d; 
    }) 
    .attr("height", 20) 
    .attr("x", 0) 
    .attr("y", function(d, i){ 
    return i * 25 
    }) 
} 

// 4. but update not working  
function update (rects, data){ 
    console.log("update method!"); 

    // 5. without below selection phrase 
    // var rects = d3.select("#myGraph") 
    // .selectAll("rect"); 

    rects.data(data) 
    .attr("width", function(d,i){ 
    return d; 
    }) 
} 

function exit (rects, data){ 
    console.log("exit method!"); 
    rects.data(data).exit().remove(); 
} 

setTimeout(function(){ 
    enter(rects ,enterData) 
}, 1500) 

setTimeout(function(){ 
    update(rects, updateData) 
}, 3000) 

setTimeout(function(){ 
    exit(rects, exitData) 
}, 4500) 

Je sais comment résoudre ce problème. Mais je ne sais pas pourquoi.

https://jsfiddle.net/baram204/Lteby67L/6/

Answer 1

La raison est Au début, lorsque vous faites:

var rects = d3.select("#myGraph") 
    .selectAll("rect"); 

Il n'y a pas rect éléments DOM dans le #myGraph div, de sorte que la sélection est vide.

Dans la fonction d'entrée, puisque la sélection est vide, nous créons autant de DOM pour les données et lions les données au DOM.

Maintenant dans update/exit vous passez la même fonction sélection vide. Donc, aucune mise à jour/sortie ne se produit.

La bonne façon serait de faire comme ceci:

function update (rects, data){ 
    console.log("update method!", rects); 

    // 5. re-select your data 
    var rects = d3.select("#myGraph") 
    .selectAll("rect"); 

    rects.data(data) 
    .attr("width", function(d,i){ 
     console.log(d) 
    return d; 
    }) 
} 

code de travail here