D3 2つのドロップダウンメニューに異なるデータを接続

Question

私は、GNIと道路交通死亡率に関する情報を含む.jsファイルから作成した散布図を持っています。私の問題は、どのように2つの異なるドロップダウンメニューを作成するのですか？今y軸のターゲットは、さまざまな道路ユーザーカテゴリのドロップダウンです。しかし、同じ低下が大陸にも適用されています。私は

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

を使用する必要があります知っているが、私はどのように、どこy軸目標を上書きせずに、私が作成したターゲットをドロップダウン大陸に接続する（つまり、現在はそれがになって何やっているかわかりませんdo）。

私はちょうどy軸と大陸のターゲットが適切な選択を表示したい。

これは私のコードです：

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

それらの配列はすでにについて浮遊している場合（あなたがでoptionDataを追加することができ、あなたのbuttonsData

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

にデータを追加します。あなたのコードのどこかにあるように：optionData: countriesとoptionData: continents）

次に、あなたがそうのようなオプションのリストを作成するためにそれにアクセスすることができます。

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

http://jsfiddle.net/f2c526ho/