javascript - 缩放到 bbox 的下拉菜单 (d3.js)

Question

我试图根据下拉菜单的选项放大bbox，我尝试了代码D3.js - Zooming to bbox with a dropdown menu但它不起作用，这是一个 js fiiddle of my work

<div id="LayerCover"style="display: inline-block;">
            </div> //this is the div where drop down menu must place 

    function mapZoomgDorow(file){

    d3.queue()
    .defer(d3.json, "Data/Updated_map.json")
    .await(menuChanged);

    }
    function menuChanged(error, jordan) {
      if (error) throw error;


        var select = d3.select('#LayerCover')
        .append('select')


        select.selectAll("option")
        .data(jordan.features)
        .enter().append("option")
        .filter(function(d) { return d.properties.Level == '1' })
        .text(function(d) { return d.properties.Name_1; console.log(d.properties.Name_1); })
        .on("click",clicked)

这给了我下拉菜单，但是当我单击时没有任何反应，请注意我单击的函数就像 https://bl.ocks.org/mbostock/4699541

Answer 1

对于答案，我删除了您的一些代码，以使其更具体地解决您遇到的问题(因此希望更易于使用)。

附加功能时，您可以附加选择菜单及其选项:

// append a menu:
var select = d3.select('form')
  .append('select')
  .on('change',function() { zoom(this.value); });
var options = select.selectAll('option')
  .data(jordan.features)
  .enter()
  .append('option')
  .html(function(d) { return d.properties.name_2; })
  .attr('value',function(d,i) { return i; });

我正在使用你的 jordan.json 的旧版本(我认为你已经更新了它，但你的 fiddle 希望我为投递箱创建一个配置文件，这样使用旧版本会更容易，而且我不这样做有你的 csv)。在实现缩放功能之前，您需要确保其正常工作。此外，您还需要为选择菜单放置一个更改事件。

此外，如果您单击(在 map 上)缩放功能和选择选项缩放功能使用相同的功能，这可能是最简单的 - 如果我们这样做，它们都需要采用相同的值。增量对此很有效(除非您要修改 geojson 中的元素数量)。不过，您需要对每个过滤器应用相同的过滤器 - 如果使用增量，路径和选项的数据必须相同。

您的缩放功能似乎工作得很好，我用 if 语句对其进行了稍微修改:如果您单击或选择同一功能两次， map 就会缩小:

var last = -1;    // the last feature zoomed to
function zoom(i) {
    // if clicking on the same feature that was zoomed to last zoom out:
    if (i == last) {
        var bounds = path.bounds(jordan),
        dx = bounds[1][0] - bounds[0][0],
        dy = bounds[1][1] - bounds[0][1],
        x = (bounds[0][0] + bounds[1][0]) / 2,
        y = (bounds[0][1] + bounds[1][1]) / 2,
        scale = .8 / Math.max(dx / width, dy / height),
        translate = [width / 2 - scale * x, height / 2 - scale * y];
        last = -1;
    }
    // otherwise, zoom in:
    else {
        var bounds = path.bounds(jordan.features[i]),
            dx = bounds[1][0] - bounds[0][0],
            dy = bounds[1][1] - bounds[0][1],
            x = (bounds[0][0] + bounds[1][0]) / 2,
            y = (bounds[0][1] + bounds[1][1]) / 2,
            scale = .8 / Math.max(dx / width, dy / height),
            translate = [width / 2 - scale * x, height / 2 - scale * y];

        last = i;
    }
    g.transition()
        .duration(750)
        .style("stroke-width", 1.5 / scale + "px")
        .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
}

我整理了一个block here .