D3 Farklı verileri 2 aşağı açılır menüye bağlama

Question

GNI ve yol trafiği ölümü hakkında bilgi içeren bir .js dosyasından oluşturulan bir dağılım grafiğim var. Sorunum, iki farklı açılır menüyü nasıl oluşturabilirim? Şu anda y ekseni hedefi, farklı yol kullanıcı kategorilerinin bir düşüşüdür. Ancak aynı düşüşler kıtalara uygulanıyor. Ben

 .selectAll("option") 
     .data(countries).enter() 
     .append("option") 
     .text(function(d) { return d.continents; }); 

kullanarak olmalıdır biliyorum ama nasıl ve nerede kıtada bağlamak şu anda o gerekeni yapıyor (y ekseni hedef üzerine yazmadan ben oluşturduk hedefi açılan bilmiyorum

Sadece y ekseninin ve kıtaların uygun seçimlerini göstermeyi hedefledim.

Bu

benim kodudur:

function createButtons() { 
// this array will be the list of dropdown menus 
// each element will have a name and the target measure it will change 

var buttonsData = [ 
    {name:"y axis", target: "y"}, 
    {name:"continents", target: "continents"} 
]; 

var buttonGroups = d3.select("#buttons").selectAll(".buttonGroup") 
    .data(buttonsData).enter() 
    .append("span").attr("class", "buttonGroup"); 


// add a label to each <span> and set the text to be the name of the dropdown 
// this name is defined in the array above 
buttonGroups.append("label").html(function(d){return d.name;}); 


// add a <select> dropdown tag to the <span> tag 
buttonGroups.append("select") 
    // when the dropdown selection changes, this event handler is called 
    .on("change", function(d) { 
     // find the index of the selection 
     var selectedIndex = d3.select(this).property('selectedIndex'); 
     // here is where the target comes into play. 

     if (d.target == "y") { 
      yAxisIndex = selectedIndex; 
     } 

     else if (d.target == "continents") { 
      continentIndex = selectedIndex; 

      /*if ((sizeIndex >= 0) && (sizeIndex <=25)) { 
       countries = countries.slice(0, 25); 
       updateVis(false); 
      }*/ 

     } 

     // and update the vis, this will change the scales, labels, and reposition/resize the circles 
     //creates the animation 
     updateVis(true); 
    }) 

    // add options to each <select> tag. 
    // these options are coming from the countries array and are bound the same way as above 
     .selectAll("option") 
     .data(headers).enter() 
     .append("option") 
     //set the text of each option to the data elements from headers array 
     .text(function(d) { return d; }); 

}

Answer 1

sizin buttonsData veri ekleme

var buttonsData = [ 
    {name:"y axis", target: "y", optionData: ["france", "germany", "australia"]}, 
    {name:"continents", target: "continents", optionData: ["europe", "oceania"]} 
]; 

(Sen o diziler zaten yaklaşık yüzen eğer optionData ekleyebilir kodunuzda bir yere öyle: optionData: countries ve optionData: continents)

Sonra şöyle opsiyon listesi oluşturmak için erişebilir:

.selectAll("option") 
     .data(function(d) { return d.optionData; }) 

http://jsfiddle.net/f2c526ho/