美好的一天,
关于这个简单的任务我需要帮助.我想要的只是在下拉列表中插入数据.当我在下拉列表中选择数据时,地图将根据所选值进行缩放.我已经有关于每个国家缩放的代码.但是当国家点击特定国家的地图时,它就在桌子上,地图将变焦,这很好.问题是我想使用d3将该国家的价值放入下拉列表中.任何人都可以帮助我...
这是我的代码.
<!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>
这段代码工作正常唯一的问题是我不能把这个国家放在下拉,我希望有一个人可以帮助我..
感谢编码员
Ame*_*aBR 19
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>元素上时发生的事情(无)进行比较.