D3 Come modificare il set di dati in base alla selezione della casella a discesa

Sto tentando di aggiornare/modificare i dati per i rettangoli in base alla selezione della casella a discesa. Ho provato varie cose e non capisco abbastanza bene la funzione di invio D3. Grato se qualcuno potesse aggiornare questo codice in modo che possa vedere come funziona in pratica. Ho 3 set di dati con valori e sto semplicemente cercando di aggiornare le dimensioni del rettangolo in base a ciò che l'utente seleziona nella barra dei menu.D3 Come modificare il set di dati in base alla selezione della casella a discesa

molte grazie,

<!DOCTYPE html> 

<html> 
<head> 
    <title>Menu Bar</title> 
    <script type="text/javascript" src="d3/d3.js"> 
    </script> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width">    

</head> 
<body> 

<select id = "opts"> 
<option value="ds1">data1</option> 
<option value="ds2">data2</option> 
<option value="ds3">data3</option> 
    <!-- and so on... --> 
    </select>  

<script type="text/javascript"> 

var w = 100, 
    h = 100 
; 

var color = d3.scale.ordinal() 
      .range(["#1459D9", "#daa520"]); 


var ds1 = [[{x:0,y:12}],[{x:0,y:45}]]; 
var ds2 = [[{x:0,y:72}],[{x:0,y:28}]]; 
var ds3 = [[{x:0,y:82}],[{x:0,y:18}]]; 


var canvas = d3.select("body") 
    .append("svg") 
    .attr("width",100) 
    .attr("height",100)   
; 

var appending = canvas.selectAll("body") 
    .data(ds2) ///trying to make this selection dynamic based on menubar selection       
    .enter()      
    .append("g") 
    .style("fill", function(d,i){return color(i);}) 
    ; 

    appending.selectAll("shape") 
    .data(function (d) {return d;}) 
    .enter() 
    .append("rect") 
    .attr("x",10) 
    .attr("y",10) 
    .attr("width",function (d) {return d.y;}) 
    .attr("height",19) 
    ; 


</script>  
</body> 
</html>

fonte

2014-06-12 user2259146

Il problema principale con lo script è che il codice viene eseguito solo una volta d3. Quando si dispone di più set di dati, il modello d3 (binding, aggiungi, aggiorna, rimuovi) deve essere chiamato ogni volta che i dati vengono aggiornati.

Ecco un abbozzo di quello che porterà a compimento ciò che si vuole:

// config, add svg 
var canvas = d3.select('body') 
    .append('svg') 
    .attr('width',100) 
    .attr('height',100) 
    .appeng('g'); 


// function that wraps around the d3 pattern (bind, add, update, remove) 
function updateLegend(newData) { 

    // bind data 
    var appending = canvas.selectAll('rect') 
     .data(newData); 

    // add new elements 
    appending.enter().append('rect'); 

    // update existing elements 
    appending.transition() 
     .duration(0) 
     .attr("width",function (d) {return d.y; }); 

    // remove old elements 
    appending.exit().remove(); 

} 

// generate initial legend 
updateLegend(initialValues); 

// handle on click event 
d3.select('#opts') 
    .on('change', function() { 
    var newData = eval(d3.select(this).property('value')); 
    updateLegend(newData); 
});

Ecco un violino di lavoro che dimostra i dati che cambiano con una select (probabilmente ha bisogno di essere ottimizzato per le vostre esigenze):

http://jsfiddle.net/spanndemic/5JRMt/

fonte

2014-06-14 22:53:09 spanndemic

+1 per la risposta e violino, grazie – nish

non potevo correre il mio codice fino a quando ho usato l'eval (d3.select (questo) .property ('valore')) invece di d3.select (questo). costo dell'immobile'). Grazie per la risposta! –

D3 Come modificare il set di dati in base alla selezione della casella a discesa

risposta

Problemi correlati