在地图上,我想使用包含这些国家/地区名称或ID的下拉菜单缩放特定国家/地区的广告。
由于这个例子,我通过点击国家来实现这一目标:https://bl.ocks.org/mbostock/4699541。 但是现在我想这样做不是通过点击国家,而是当我在下拉菜单中选择它时。
我在这里找到了一些答案:putting the country on drop down list using d3 via csv file。但它在我的情况下不起作用(我认为问题在于“jsonOutside.features.forEach(function(d)”部分)。
我试过这样做,但它不起作用:
d3.select("#zoom").on("change", function() { //trying to zoom on the bbox with the dropdown menu
var selected = this.value; //but it doesn't work
clicked(selected);
});
我在此代码中放置了一个console.log,它返回正确的值(国家/地区的ID)。我也在“点击”功能中完成了它,它返回了一个对象。 所以我认为问题是我的下拉菜单只包含国家名称,而不是被点击的功能使用的对象。
以下是我的其余代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<style type="text/css">
#form {
width: 20%;
padding-top: 200px;
margin-left: 2%;
}
#svg {
display: block;
margin-left: 30%;
margin-top: -300px;
border: 1px;
}
#map {
border: 2px;
}
</style>
</head>
<body>
</div>
<form id="form">
<fieldset>
<legend>Zoom on</legend>
<div>
<select id="zoom">
<option value="01">01</option> //options containing the countries id
<option value="02">02</option>
<option value="03">03</option>
</select>
</div>
</fieldset>
</form>
<div id="map"></div>
</div>
</body>
</html>
<script type="text/javascript">
var width = 600, height = 550, centered;
var path = d3.geo.path();
var projection = d3.geo.conicConformal() //focus on the topojson
.center([2.454071, 47.279229])
.scale(3000)
.translate([width / 2, height / 2]);
path.projection(projection);
var svg = d3.select('#map').append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height);
var departments = svg.append("g");
function clicked(d) { //zoom on bbox function
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
svg.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
svg.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");
}
d3.json('https://gist.githubusercontent.com/PierreVivet/f46c2fe235ec7d7ab2db3dbaa163cc50/raw/f2f3fb092beb94f3a0582a9a82a040fa789028c1/departements.json', function(req, data) {
data.objects.territoire.geometries.forEach(function (d) {
d.properties = {};
d.properties.code = d.code;
});
departments.selectAll("path")
.data(topojson.feature(data, data.objects.territoire).features)
.enter()
.append("path")
.attr("d", path)
.attr('id', function(d) {return "d" + d.properties.code;})
.style("fill", "white")
.style("stroke", "black")
.style("stroke-width", ".5px")
.on("click", clicked); //the function works fine by clicking on the country
});
d3.select("#zoom").on("change", function() { //trying to zoom on the bbox with the dropdown menu
var selected = this.value; //but it doesn't work
clicked(selected);
});
</script>
您对如何做到这一点有什么想法吗?
由于
答案 0 :(得分:1)
我找到了问题的答案。
我接近它,唯一的问题是我用html手动创建了选择菜单。关键是要用d3直接创建和填充它,所以我们可以使用onclick函数和正确的&#39; d&#39;。
使用的代码如下:
var select = d3.select('#map')
.append('select')
select.selectAll("option")
.data(topojson.feature(data, data.objects.territoire).features)
.enter().append("option")
.text(function(d) { return d.properties.code; })
.on("click", function(d) { clicked(d); });
这不是很复杂,但由于我还不熟悉D3,我需要理解语法。
感谢Lars Kotthoff的回答:https://groups.google.com/forum/#!topic/d3-js/g6PLMZbRLvs