Agregar el menú desplegable usando d3.js

Question

Estoy tratando de agregar un menú desplegable a mi visualización d3. El problema es que el eventlistener no se invoca al seleccionar ninguna de las opciones. Además, ¿cómo puedo acceder al valor de la opción seleccionada? Lo que sigue es un fragmento de mi código ..

d3.text("uniqueTeams.php",function(json){ 
    var dd=JSON.parse(json); 
    var b= d3.select("#s4").select("#shru"); 
    var u=b.append("select"); 
    var t=u.selectAll("option").data(dd).enter().append("option") 
     .attr("value",function(d){return d.teamShotID;}) 
     .text(function(d){return d3.select(this).node().__data__.teamShotID;}); 
    t.on("change",change); 
}); 
function change(value) 
{ 
    console.log("team",value); 
} 
change();​​​​ 

Thankx

Answer 1

Es necesario añadir el .on("change") al elemento select, no los option elementos.

var select = d3.select("#shru").append("select").on("change", change), 
    options = select.selectAll('option').data(dd); // Data join 

// Enter selection 
options.enter().append("option").text(function(d) { return d.teamShotID; }); 

El option índice seleccionado en ese momento se mantiene en una propiedad llamada selectedIndex en el elemento select. Selections are arrays, so elements can be accessed directly (e.g., selection[0][0]). Cada elemento option habrá de datos enlazado a ella, almacenada en una propiedad llamada __data__:

function change() { 
    var selectedIndex = select.property('selectedIndex'), 
     data   = options[0][selectedIndex].__data__; 
} 

Editar: Para facilitar la lectura y es de esperar para ayudarle a entender el código anterior, me gustaría incluir también esta sintaxis alternativa:

function change() { 
    var si = select.property('selectedIndex'), 
     s = options.filter(function (d, i) { return i === si }), 
     data = s.datum(); 
} 

Answer 2

esperanza de que esto le puede guiar a ...

 var dispatch = d3.dispatch("load", "countrychange"); 
    d3.csv("data/ERSreputationBlocked.csv",type, function (error, country) { 
     if (error) throw error; 
     var countryById = d3.map(); 
     country.forEach(function (d) { countryById.set(d.id, d); }); 
     dispatch.load(countryById); 
     dispatch.countrychange(countryById.get("PH")); 
     //console.log(country); 
    }); 
    dispatch.on("load.menu", function(countryById) { 
     var select = d3.select("body") 
     .append("div") 
     .append("select") 
     .on("change", function() { dispatch.countrychange(countryById.get(this.value)); }); 

     select.selectAll("option") 
     .data(countryById.values()) 
     .enter().append("option") 
     .attr("value", function (d) { return d.id; }) 
     .text(function (d) { return d.Country; }); 

     dispatch.on("countrychange.menu", function (country) { 
      select.property("value", country) 
      //loading the value based on the selected data 
      var svg1 = d3.select("body").append("svg1") 
       .attr("width", width) 
       .attr("height", height) 
      //end of selection 

     console.log(country); 
     }); 
    }); 
    //end of drop down 

    function type(d) { 
     d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; }); 
     return d; 
    }