使用d3通过csv文件将国家/地区放在下拉列表中

HTML中的下拉菜单是通过使用包含内部<select>元素的<option>元素创建的,如下所示:

<select name="country-list">
  <option value="Afghanistan">Afghanistan</option>
  <option value="Albania">Albania</option> 
  <option value="Algeria">Algeria</option>
  <!-- and so on... -->
</select>

要创建此结构,您只需通过并调整原始代码中创建表的部分即可.首先创建一个<select>元素而不是<table>元素,如下所示:

var dropDown = d3.select("#table_container").append("select")
                    .attr("name", "country-list");

您可以跳过部分thead和tbody部分,因为下拉菜单的结构非常简单.然后,tr我们加入它来创建一系列option元素,而不是连接数据来创建(表格行)元素的选择:

var options = dropDown.selectAll("option")
               .data(data) // eg., data = [ {'value': 10}, {'value': 11}, {'value': 12} ]
               .enter()
               .append("option");

然后value根据数据添加选项元素的属性和文本内容:

options.text(function (d) { return d.value; })
       .attr("value", function (d) { return d.value; });

我希望这一切都是直截了当的.添加事件处理程序时会更复杂一些.

下拉列表的事件处理程序作为一个整体添加到列表中,而不是响应单个国家/地区名称上的"单击"事件,并响应"更改"事件:

dropDown.on("change", menuChanged);

但是,因为事件处理程序附加到整个列表而不是附加到每个单独的选项元素,所以它无法d从所选元素传递数据对象.相反,value所选元素的属性存储在全局d3.event对象中,如d3.event.target.value.这就是为什么我小心设置每个选项元素的value属性以匹配数据对象的value属性.

因此,您需要做的最后一件事是更改事件处理程序方法以使用事件值而不是传入的数据值:

/*  BEFORE
function tableRowClicked(x) {
      //x is the data object for that individual table row

    jsonOutside.features.forEach(function (d) { 
        // loop through json data to match td entry

        if (x.value === d.properties.name) {
        //for each data object in the features array (d), compare it's
        //name against the one in the table row data object

            alert(x.value)
            var country = d; //this does nothing...
            click(d); // pass json element that matches td data to click 
        };
    })
}
//*/
//* AFTER
function menuChanged() {
          //the name isn't important, but has to match the name
          //you added to the menu's "change" event listener.

    var selectedValue = d3.event.target.value;  
         //get the name of the selected option from the change event object

    jsonOutside.features.forEach(function (d) { 
        // loop through json data to match td entry

        if (selectedValue === d.properties.name) {
        //for each data object in the features array (d), compare it's
        //name against the one you got from the event object
        //if they match, then:

            alert(selectedValue)  //remove this line when things are working!

            click(d); // pass json element that matches selected value to click
             //which will respond the same way as if you clicked the country on
             //the map. 
        };
    })
}
//*/

我在这里的下拉菜单上有一个稍微简单的事件示例:
http://fiddle.jshell.net/7KJC7/2/
选项元素在HTML中预编码而不是从数据创建,但是我将展示如何从d3.event对象访问有关选择的不同类型的数据,并与尝试将事件处理程序放在单个<option>元素上时发生的事情(无)进行比较.