D3.js 通过csv文件使用d3将国家/地区置于下拉列表中
你好 关于这个简单的任务，我需要帮助。我只想在下拉列表中插入数据。当我在下拉列表中选择数据时，地图将根据所选值缩放。我已经有了关于每个国家缩放的代码。但它在表格中，当国家单击特定tr的国家时，地图将缩放，一切正常。问题是，我想使用d3将国家的值放入下拉列表中。有人能帮我吗 这是我的密码D3.js 通过csv文件使用d3将国家/地区置于下拉列表中,d3.js,maps,D3.js,Maps,你好 关于这个简单的任务，我需要帮助。我只想在下拉列表中插入数据。当我在下拉列表中选择数据时，地图将根据所选值缩放。我已经有了关于每个国家缩放的代码。但它在表格中，当国家单击特定tr的国家时，地图将缩放，一切正常。问题是，我想使用d3将国家的值放入下拉列表中。有人能帮我吗 这是我的密码 <!DOCTYPE html> <meta charset="utf-8"> <style>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.legend {
font-size: 10px;
z-index:0;
}
rect {
fill: none;
pointer-events: all;
}
.feature {
fill: #ccc;
cursor: pointer;
}
.feature.active {
fill: orange;
}
.mesh {
fill: none;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
}
.csvTable table {
border-collapse: collapse;
text-align: left;
width: 100%;
}
.csvTable {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #069;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.csvTable table td, .csvTable table th {
padding: 3px 10px;
}
.csvTable table thead th {
background: 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699',endColorstr='#00557F');
background-color: #006D2C;
color: #FFF;
font-size: 15px;
font-weight: 700;
border-left: 1px solid #0070A8;
}
.csvTable table thead th:first-child {
border: none;
}
.csvTable table tbody td {
color: #00496B;
border-left: 1px solid #E1EEF4;
font-size: 12px;
border-bottom: 1px solid #E1EEF4;
font-weight: 400;
}
.csvTable table tbody td:first-child {
border-left: none;
}
.csvTable table tbody tr:last-child td {
border-bottom: none;
}
.csvTable tr:hover td {
background-color: #069;
color: white;
}
</style>
<script src="Script/d3.v3.min.js" ></script>
<script src="Script/topojson.v1.min.js"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<body>
<!-- Table to hold the Divs -->
<table border="0" cellpadding="10" style="overflow-y: scroll;">
<tr>
<td><div id="country_select" class="csvTable"></div></td>
<td><div id="table_container" class="csvTable"></div></td>
<td><div id="map_container"></div></td>
</tr>
</table>
<script>
var w = 900;
var h = 300;
var active;
var jsonOutside;
var projection = d3.geo.mercator()
.center([0, 5])
.rotate([0, 0])
.scale(100)
.translate([w / 2, h / 2])
.precision(9);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("#map_container")
.append("svg")
.attr("width", w)
.attr("height", h);
var color_domain = [1, 50000, 250000, 70000000, 150000000, 300000000];
var ext_color_domain = [100, 50000, 250000, 70000000, 150000000, 300000000];
var legend_labels = ["< 5000", "5000+", "100000+", "500000+", "7500000+", "> 15000000"];
// var legend_labels = ["< 5000", "5000+", "15000+", "35000+", "75000+", "> 150000"];
var color = d3.scale.log()
.domain(color_domain)
.range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);
// .range(["#adfcad", "#ccff66", "#ffff00", "#cc9933", "#0099ff", "#ff1300"])
// from colorbrewer (http://colorbrewer2.org/)
//var colours = ["#BAE4B3", "#74C476", "#31A354", "#006D2C"];
//var colScale = d3.scale.ordinal()
// .range(colours);
svg.append("rect")
.attr("width", w)
.attr("height", h)
.on("click", reset);
var g = svg.append("g");
d3.csv("data/TotalReputationBlocked.csv", function (data) {
d3.json("data/world-population.geo.json", function (json) {
json.features.forEach(function (d, i) {
data.forEach(function (e, j) {
if (d.properties.name === e.Country) {
d.properties.value = +e.Result;
};
})
})
jsonOutside = json; // pass json to a global so tableRowClicked has access
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("Philippines"));
});
dispatch.on("load.menu", function (countryById) {
var select = d3.select("body")
.append("div")
.append("select")
//.on("change", function () { dispatch.countrychange(countryById.get(this.value)); });
.on("click", click)
// .on("change", function (d) { tableRowClicked(d); });
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.map", function (d) {
select.property("value", d)
//.on("click",tableRowClicked)
.on("click", click)
// //end of selection
});
});
//end of selection
//var columns = ["Country", "Result"];
//var table = d3.select("#table_container").append("table"),
// thead = table.append("thead"),
// tbody = table.append("tbody");
//// append the header row
//thead.append("tr")
// .selectAll("th")
// .data(columns)
// .enter()
// .append("th")
// .text(function (column) { return column; });
//// create a row for each object in the data
//var rows = tbody.selectAll("tr")
// .data(data)
// .enter()
// .append("tr");
//// create a cell in each row for each column
//var cells = rows.selectAll("td")
// .data(function (row) {
// return columns.map(function (column) {
// return { column: column, value: row[column] };
// });
// })
// .enter()
// .append("td")
// .text(function (d) { return d.value; }
// )
// .on("click", function (d) { tableRowClicked(d); }); // added on click event to td element NB you need to click on the cell with the conuty name
// add extents (max and min) from data results for choropleth
//color.domain(d3.extent(data, function (d) { return d.Result; }));
//Bind data and create one path per GeoJSON feature
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.attr("class", "feature")
.attr("id", function (d) { return d.properties.name; }) // added id so click could work on id which is common between the json and csv data
//.on("click",function (d) { tableRowClicked(d); })
.on("click", function (d) { click(d); })
.style("stroke", "white")
//.style("fill", function (d, i) { return colScale(d.properties.value); }); // fill based on colour scale
.style("fill", function (d) {
return color(d.properties.value);
});
g.append("path")
.data(json.features)
.enter()
.append("path")
.attr("class", "mesh")
.attr("d", path);
});
});
function type(d) {
d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; });
return d;
}
var legend = svg.selectAll("g.legend")
.data(ext_color_domain)
.enter().append("g")
.attr("class", "legend");
var ls_w = 20, ls_h = 20;
legend.append("rect")
.attr("x", 20)
.attr("y", function (d, i) { return h - (i * ls_h) - 2 * ls_h; })
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function (d, i) { return color(d); })
.style("opacity", 0.8);
legend.append("text")
.attr("x", 50)
.attr("y", function (d, i) { return h - (i * ls_h) - ls_h - 4; })
.text(function (d, i) { return legend_labels[i]; });
function click(d) {
if (active === d) return reset();
g.selectAll(".active").classed("active", false);
d3.select("#" + d.properties.name).classed("active", active = d); // changed selection to id
var b = path.bounds(d);
g.transition().duration(1000).attr("transform",
"translate(" + projection.translate() + ")"
+ "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h) + ")"
+ "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
}
function reset() {
g.selectAll(".active").classed("active", active = false);
g.transition().duration(750).attr("transform", "");
}
function tableRowClicked(x) {
jsonOutside.features.forEach(function (d) { // loop through json data to match td entry
if (x.value === d.properties.name) {
alert(x.value)
var country = d;
click(d); // pass json element that matches td data to click
};
})
}
</script>
</body>
</html>
.传奇{
字体大小：10px；
z指数：0；
}
直肠{
填充：无；
指针事件：全部；
}
.特征{
填充：#ccc；
光标：指针；
}
.feature.active{
填充物：橙色；
}
.网格{
填充：无；
冲程：#fff；
笔划宽度：.5px；
笔划线条连接：圆形；
}
.csvTable表格{
边界塌陷：塌陷；
文本对齐：左对齐；
宽度：100%；
}
.csvTable{
字体：标准12px/150%Arial，Helvetica，无衬线；
背景：#fff；
溢出：隐藏；
边框：1px实心#069；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
}
.csvTable表td、.csvTable表th{
填充：3x10px；
}
.csvTable表格thead th{
背景：0；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#006699'，endColorstr='#00557F'）；
背景色：#006D2C；
颜色：#FFF；
字体大小：15px；
字号：700；
左边框：1px实心#0070A8；
}
.CSV表格THAD th：第一个孩子{
边界：无；
}
.csvTable table tbody td{
颜色：#00496B；
左边框：1px实心#E1EEF4；
字体大小：12px；
边框底部：1px实心#E1EEF4；
字体大小：400；
}
.csvTable table tbody td：第一个孩子{
左边界：无；
}
.csvTable table tbody tr:最后一个子项td{
边框底部：无；
}
.csvTable tr：悬停td{
背景色：#069；
颜色：白色；
}
var w=900；
var h=300；
var活跃；
var-jsonOutside；
var projection=d3.geo.mercator（）
.center（[0,5]）
.旋转（[0,0]）
.比例尺（100）
.翻译（[w/2，h/2]）
.精度（9）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3。选择（“映射容器”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var color_domain=[1,50000,250000,70000000,150000000,300000000]；
var ext_color_domain=[100,50000,250000,70000000,150000000,300000000]；
var图例标签=[“<5000”、“5000+”、“100000+”、“500000+”、“7500000+”、“>15000000”]；
//var图例标签=[“<5000”、“5000+”、“15000+”、“35000+”、“75000+”、“>150000”]；
var color=d3.scale.log（）
.domain（颜色域）
.范围（[“#adfcad”、“#ffcb40”、“#ffba00”、“#ff7d73”、“#ff4e40”、“#ff1300”]）；
//.范围（[“#adfcad”、“#ccff66”、“#ffff00”、“#cc9933”、“#0099ff”、“#ff1300”]）
//来自colorbrewer(http://colorbrewer2.org/)
//var COLORS=[“BAE4B3”、“74C476”、“31A354”、“006D2C”]；
//var colScale=d3.scale.ordinal（）
//.范围（颜色）；
svg.append（“rect”）
.attr（“宽度”，w）
.attr（“高度”，h）
。打开（“单击”，重置）；
var g=svg.append（“g”）；
d3.csv（“数据/TotalReputationBlocked.csv”），函数（数据）{
d3.json（“data/world population.geo.json”，函数（json）{
forEach（函数（d，i）{
data.forEach（函数（e，j）{
如果（d.properties.name==e.Country）{
d、 properties.value=+e.Result；
};
})
})
jsonOutside=json；//将json传递给全局对象，以便tableRowClicked具有访问权限
var调度=d3.调度（“负荷”、“国家变化”）；
d3.csv（“数据/个人声誉阻止.csv”），类型，功能（错误，国家）{
如果（错误）抛出错误；
var countryById=d3.map（）；
country.forEach（函数（d）{countryById.set（d.id，d）；}）；
发货.装货（countryById）；
dispatch.countrychange（countryById.get）（“菲律宾”）；
});
dispatch.on（“load.menu”，函数（countryById）{
var select=d3.选择（“主体”）
.附加（“div”）
.append（“选择”）
//.on（“change”，函数（）{dispatch.countrychange（countryById.get（this.value））；}）；
.on（“单击”，单击）
//.on（“更改”，函数（d）{tableRowClicked（d）；}）；
select.selectAll（“选项”）
.data（countryById.values（））
.enter（）.append（“选项”）
.attr（“值”，函数（d）{return d.id；}）
.text（函数（d）{返回d.国家；}）；
dispatch.on（“countrychange.map”，功能（d）{
选择属性（“值”，d）
//。打开（“单击”，表格行单击）
.on（“单击”，单击）
////选择结束
});
});
//选择结束
//变量列=[“国家”，“结果”]；
//var table=d3.选择（“#table_container”）.追加（“table”），
//thead=table.append（“thead”），
//tbody=table.append（“tbody”）；
////追加标题行
//附件（“tr”）
//.selectAll（“th”）
//.数据（列）
//.输入（）
//.附加（“th”）
//.text（函数（列）{返回列；}）；
////为数据中的每个对象创建一行
//变量行=tbody.selectAll（“tr”）
//.数据（数据）
//.输入（）
//.附加（“tr”）；
////在每行中为每列创建一个单元格
//变量单元格=行。选择全部（“td”）
//.数据（功能（行）{
<select name="country-list">
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<!-- and so on... -->
</select>
var dropDown = d3.select("#table_container").append("select")
.attr("name", "country-list");
var options = dropDown.selectAll("option")
.data(data) // eg., data = [ {'value': 10}, {'value': 11}, {'value': 12} ]
.enter()
.append("option");
options.text(function (d) { return d.value; })
.attr("value", function (d) { return d.value; });
dropDown.on("change", menuChanged);
/* 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.
};
})
}
//*/