javascript - D3.js - 使用下拉菜单缩放到 bbox-6ren

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

转载作者：行者123 更新时间：2023-11-27 22:53:32

25

4

在 map 上，我想放大特定国家/地区的 bbox，并使用包含这些国家/地区的名称或 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)。我也在“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>

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

谢谢

最佳答案

我找到了问题的答案。

我已经接近它了，唯一的问题是我用 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

关于javascript - D3.js - 使用下拉菜单缩放到 bbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37835815/

25

4

0

文章推荐： javascript - 在 D3 map 中显示事件列表

文章推荐： javascript - MongoDB 脚本执行存储在变量中的查询

文章推荐： javascript - 网络网格关闭分页

文章推荐： javascript - JS 正则表达式在特殊字符之前匹配空格

javascript - 连接两个边界框 bbox
我有两个边界框，想要创建一个包含这两个边界框的大边界框 - 将它们连接起来。例如(turf.bbox的2个结果): var bboxCircles = turf.bbox({
python - 在线性时间内合并图像区域(bboxes)
我有一些图像的一组区域(边界框)，例如 python 代码: im = Image.open("single.png") pix = np.array(im) gray = rgb2grey(pix)
OpenLayers 使用 BBOX 策略找出用户的缩放级别
我目前正在制作一个使用 OpenLayers 并使用 BBOX 策略进行绘图的网站。数据库中可能有很多要绘制的点。当 OpenLayers 发送 BBOX 坐标时，我希望 OpenLayers 发送当
javascript - raphaeljs bbox 集合中出现问题
我尝试使用 rafael 库的 set() ，得到了 bbox 的奇怪行为，这里是示例(请设置 i>2 来查看问题)，也放在 jsfiddle http://jsfiddle.net/Uue5h/46
java - PDFBox、BBox、页码？
我正在使用 PDFBox，成功地从 PDF 中检索字段坐标。继续处理多页 PDF，我遇到了这样的情况:我需要确定这些字段来自哪个页面，此外还需要将坐标从自下而上转换为自上而下。我已经阅读了文档的许多页
python - 查找像素簇和绘制 bbox 的最有效算法是什么
我有以下场景，我有一个 N*N 二进制图像，我想找到簇的数量并在它们周围绘制 bbox。一些要求: - 至少有 1 个集群，也可以有很多。 - 唯一“可控制”的参数是k，它是属于同一簇的像素之间的最
python - 如何在给定相对 bbox 坐标的情况下在此图片上裁剪车号？
我有这张照片: 我有以下相对坐标: [[0.6625, 0.6035714285714285], [0.7224999999999999, 0.6035714285714285], [0.722499
overpass-api - bbox-query 是否返回部分在边界框中的方式？
我正在尝试确定 Overpass-API 的 bbox-query 是否应该返回以下方式: 完全被框包围(所有节点都在框内) 盒子里至少有一个节点。至少有一个线段与框相交(即使框内实际上没有节点)。
python - matplotlib 文本 bbox 的特定边距
在 matplotlib 中添加文本时，是否可以在 bbox 的特定一侧指定填充？我正在添加一个 LaTex 表作为文本，由于某种原因，该表自然未对齐，没有填充规范。我想考虑到在 bbox 顶部添加填
python - Matplotlib。将子图与 Bbox 对齐
我有一个由 6 个子图组成的网格。最后一个子图是方形的。我需要将其向左移动，以便其左侧 y 轴与其上方绘图的 y 轴完美对齐。我知道我可以获取和设置 Bbox 参数，但我无法将其朝正确的方向移动。无论
python - tkinter - 为什么会有像 bbox 这样的东西？
现在我更多地使用 tkinter Canvas，我想知道 bbox 的使用。对我来说，我使用 bbox 来获取元素的坐标，但 Canvas 已经有一个方法来返回一个项目的坐标。那么他们为什么要发明像
python-3.x - 有没有办法为Windows安装cython-bbox？
我已经安装了Visual Studio，并且正在尝试运行取决于cython_bbox包的Python3程序。我尝试在Windows Anaconda3环境中使用pip install cython-b
javascript - D3.js - 使用下拉菜单缩放到 bbox
在 map 上，我想放大特定国家/地区的 bbox，并使用包含这些国家/地区的名称或 ID 的下拉菜单。借助以下示例，我通过单击国家/地区来实现此目的:https://bl.ocks.org/mbo
python - Matplotlib Table Bbox - 如何控制位置和样式？
我可以像这样向轴添加表格: from matplotlib.table import table stats_table = table(ax5, cellText=cell_text,
javascript - 隐藏时获取 SVG 的 BBox
我已经尝试解决这个问题超过一天了，但我找不到答案。我的问题是我需要缩放 SVG 图像(响应式设计)。我需要在客户端操作 SVG 代码，因此无法通过 img 标签嵌入它。因此，我尝试改用内联图像。但是，
python - Matplotlib:在其 bbox 中居中文本
我必须绘制一些数据和一些垂直线来分隔有趣的间隔，然后我想使用 text 添加一些标签。我无法完全避免标签与数据或垂直线重叠，因此我决定在文本周围放置一个 bbox 以保持其可读性。我的问题是我无法将它
javascript - bbox 的 jVectorMap 坐标
我创建了一个自定义 SVG 国家 map 并使用 jVectorMap 绘制它。现在我正尝试在此 map 上使用经/纬度插入标记，但我不明白“bbox”x;y 系统是如何工作的。我想我必须对我的 m
javascript - 获取一组 Raphael 对象的 BBox？
将多个 Raphael 对象作为一个整体获取边界框的最佳方法是什么？我可以将它们全部放在一个 set 中并调用 mySet.getBBox() 吗？或者我是否需要遍历所有这些，为每个获取 bbox
javascript - svg.js bbox() 在scale() 之后返回相同的值
var SVGElement = SVG('elementId'); var group = SVGElement.group().path('M50,49.67a18.5,18.5,0,1,0-18
sql - 从 PostGIS 中的 BBOX 坐标创建多边形几何
我有一个表 mytable，其坐标表示对象的 Bounding BOX 作为 geom_bbox 列中的文本字符串，例如 "548477,6591107,548493,6591121"。 EPSG33

首页

博学

6Ren·AI

商城

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