Thêm menu thả xuống bằng cách sử dụng d3.js

Question

Tôi đang cố thêm một trình đơn thả xuống vào hình ảnh d3 của tôi. Vấn đề là eventlistener không được gọi khi chọn bất kỳ tùy chọn nào. Ngoài ra, làm cách nào tôi có thể truy cập vào giá trị của tùy chọn được chọn? Sau đây là một đoạn mã của tôi ..

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

Bạn cần phải thêm .on("change") tới phần tử select, không phải là yếu tố option.

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

Các hiện đang được chọn option Chỉ số này được giữ trong một tài sản được gọi selectedIndex trên các yếu tố select. Selections are arrays, so elements can be accessed directly (e.g., selection[0][0]). Mỗi phần tử option sẽ có dữ liệu ràng buộc với nó, lưu trữ trong một tài sản được gọi __data__:

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

Edit: Đối với khả năng đọc và hy vọng để giúp bạn hiểu đoạn code ở trên, tôi muốn cũng bao gồm cú pháp thay thế này:

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

Answer 2

hy vọng điều này có thể hướng dẫn bạn ...

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