D3 Açılır kutu seçimine göre veri kümesi nasıl değiştirilir

Açılır kutu seçimine bağlı olarak dikdörtgenler için verileri güncellemeye/değiştirmeye çalışıyorum. Çeşitli şeyleri denedim ve D3 gönderme işlevini yeterince iyi anlamıyorum. Birisi bu kodu nasıl güncelleyebildiğini görebilseydi, böylece nasıl çalıştığını görebiliyorum. Değerlere sahip 3 veri kümem var ve kullanıcının menü çubuğunda neyi seçtiğine göre dikdörtgen boyutlarını güncellemeye çalışıyorum.D3 Açılır kutu seçimine göre veri kümesi nasıl değiştirilir

çok teşekkürler, komut ile

<!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>

kaynak

2014-06-12 user2259146

ana konu d3 kodu sadece bir kez yürütür olmasıdır. Birden çok veri kümesine sahip olduğunuzda, d3 kalıbı (bağla, ekle, güncelle, kaldır) her veri güncelleştirildiğinde çağrılmalıdır.

: Burada

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

(muhtemelen ihtiyaçlarınız için tweaked gerekir) seçilmiş olan değişen veriyi gösteren bir çalışma keman olduğunu: Burada

istediğini başarmak edeceklerine ilişkin bir taslaktır Ben eval (d3.select (this) .property ('değer')) kullanana kadar cevap ve keman için

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

kaynak

2014-06-14 22:53:09 spanndemic

1, teşekkürler – nish

yerine d3.select ait (bu) benim kod çalıştıramaz. mülk değeri'). Cevabınız için teşekkürler! –

D3 Açılır kutu seçimine göre veri kümesi nasıl değiştirilir

cevap

İlgili konular