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

【问题标题】：D3.js - Zooming to bbox with a dropdown menuD3.js - 使用下拉菜单缩放到 bbox
【发布时间】：2016-06-15 12:43:07
【问题描述】：

在地图上，我想使用包含这些国家/地区名称或 ID 的下拉菜单放大特定国家/地区的 bbox。

感谢这个例子，我通过点击国家来做到这一点：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>

您对如何做到这一点有任何想法吗？

谢谢

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我找到了问题的答案。

我已经接近它了，唯一的问题是我用 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 在这里找到的答案：https://groups.google.com/forum/#!topic/d3-js/g6PLMZbRLvs

【讨论】：