D3 ड्रॉप डाउन बॉक्स चयन

पर आधारित डेटासेट को कैसे बदलें I ड्रॉप डाउन बॉक्स चयन के आधार पर आयत के लिए डेटा को अपडेट/बदलने का प्रयास कर रहा हूं। मैंने विभिन्न चीजों की कोशिश की है और मैं वास्तव में डी 3 प्रेषण समारोह को पर्याप्त रूप से समझ नहीं पा रहा हूं। आभारी अगर कोई इस कोड को अपडेट कर सकता है ताकि मैं देख सकूं कि यह अभ्यास में कैसे काम करता है। मेरे पास मूल्यों के साथ 3 डेटासेट हैं, और मैं मेनू बार में उपयोगकर्ता द्वारा चुने गए उपयोगकर्ता के आधार पर आयताकार आयामों को अपडेट करने का प्रयास कर रहा हूं।D3 ड्रॉप डाउन बॉक्स चयन

बहुत धन्यवाद,

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

स्रोत

2014-06-12 user2259146

मुख्य मुद्दा अपनी स्क्रिप्ट वाली है कि d3 कोड केवल एक बार निष्पादित होता है। जब आपके पास एकाधिक डेटा सेट होते हैं, तो डी 3 पैटर्न (बाइंड, एड, अपडेट, हटाएं) प्रत्येक बार डेटा अपडेट होने पर कॉल किया जाना चाहिए।

यहाँ क्या हासिल होगा का एक मोटा रूपरेखा है कि आप क्या चाहते:

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

यहाँ एक काम बेला है कि डेटा एक का चयन करें (शायद अपनी आवश्यकताओं के लिए बदलाव किए जाने की जरूरत है) के साथ बदल रहा है यह दर्शाता है

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

स्रोत

2014-06-14 22:53:09 spanndemic

जवाब और बेला के लिए +1, धन्यवाद – nish

मुझे नहीं मेरे कोड जब तक मैं eval (d3.select (यह) .property ('मान')) का इस्तेमाल किया d3.select के बजाय (यह) चला सकते हैं। संपत्ति मूल्य')। जवाब के लिए धन्यवाद! –

D3 ड्रॉप डाउन बॉक्स चयन

उत्तर

संबंधित मुद्दे