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的旧版本（我想你已经更新了它，但是你的小提琴想要我为drop box创建一个配置文件，所以它更容易使用旧的，我不有你的csv）。在实现缩放功能之前，您需要确保这是有效的。此外，您还需要为选择菜单设置一个更改事件。

此外，如果您点击（在地图上）缩放功能并选择一个选项缩放功能使用相同的功能，这可能是最简单的 - 如果我们这样做，他们都需要采用相同的值。增量适用于此（除非您正在修改geojson中的元素数）。您需要对每个应用相同的过滤器 - 如果使用增量，路径和选项的数据必须相同。

你的缩放功能看起来效果很好，我用if语句略微修改了它：如果你点击或选择两次相同的功能，地图会缩小：

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。

缩放到bbox的下拉菜单（d3.js）

1 个答案: