Javascript D3.js-使用下拉菜单缩放到bbox_Javascript_D3.js

Javascript D3.js-使用下拉菜单缩放到bbox

javascript d3.js

Javascript D3.js-使用下拉菜单缩放到bbox,javascript,d3.js,Javascript,D3.js,在地图上，我想用一个下拉菜单放大特定国家的bbox，其中包含这些国家的名称或ID 多亏了这个例子，我通过点击国家来实现这一点：。但现在我想做的不是点击国家，而是在下拉菜单中选择它我在这里找到了一些答案：。但在我的例子中它不起作用（我认为问题在于“jsonOutside.features.forEach（function（d）”部分）我试过这么做，但没用： d3.select("#zoom").on("change", function() { //trying to zoom on

在地图上，我想用一个下拉菜单放大特定国家的bbox，其中包含这些国家的名称或ID

多亏了这个例子，我通过点击国家来实现这一点：。但现在我想做的不是点击国家，而是在下拉菜单中选择它

我在这里找到了一些答案：。但在我的例子中它不起作用（我认为问题在于“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）。我也在“clicked”函数中这样做，它会返回一个对象。因此，我认为问题在于，我的下拉菜单只包含国家名称，而不包含单击函数所使用的对象

以下是我的代码的其余部分：

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


#形式{
宽度：20%；
填充顶部：200px；
左缘：2%；
}
#svg{
显示：块；
左缘：30%；
利润上限：-300px；
边界：1px；
}
#地图{
边界：2px；
}
放大
01//包含国家/地区id的选项
02
03
变量宽度=600，高度=550，居中；
var path=d3.geo.path（）；
var projection=d3.geo.conicConformal（）//关注拓扑结构
.中心（[2.454071,47.279229]）
.比例尺（3000）
.翻译（[宽度/2，高度/2]）；
路径.投影（投影）；
var svg=d3.选择（“#映射”）.追加（“svg”）
.attr（“id”、“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var departments=svg.append（“g”）；
单击的函数（d）{//缩放bbox函数
变量x，y，k；
如果（d&&居中！==d）{
var形心=路径形心（d）；
x=质心[0]；
y=质心[1]；
k=4；
居中=d；
}否则{
x=宽度/2；
y=高度/2；
k=1；
居中=空；
}
svg.selectAll（“路径”）
.classed（“活动”，居中和函数（d）{return d===centered；}）；
svg.transition（）
.持续时间（750）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）比例（“+k+”）平移（“+-x+”、“+-y+”）
.样式（“笔划宽度”，1.5/k+“px”）；
}
d3.json（'https://gist.githubusercontent.com/PierreVivet/f46c2fe235ec7d7ab2db3dbaa163cc50/raw/f2f3fb092beb94f3a0582a9a82a040fa789028c1/departements.json，函数（请求，数据）{
数据。对象。地形。几何。forEach（函数（d）{
d、 属性={}；
d、 properties.code=d.code；
});
departments.selectAll（“路径”）
.data（topojson.feature（data，data.objects.territoire.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）
.attr（'id'，函数（d）{return“d”+d.properties.code；}）
.样式（“填充”、“白色”）
.style（“笔划”、“黑色”）
.style（“笔划宽度”，“0.5px”）
.on（“click”，clicked）；//通过单击国家/地区，该函数可以正常工作
});
d3.选择（“缩放”）.on（“更改”，function（）{//尝试使用下拉菜单在bbox上缩放
var selected=this.value；//但它不起作用
点击（选中）；
});

你对怎么做有什么想法吗

谢谢，我找到了我问题的答案

我很接近它，唯一的问题是我用html手动创建了选择菜单。重点是直接用d3创建并填充它，这样我们就可以使用右“d”的onclick函数

使用的代码如下所示：

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在此处提供的答案：