Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >停止缩放D3世界地图中的气泡

停止缩放D3世界地图中的气泡
EN

Stack Overflow用户
提问于 2017-10-24 17:36:58
回答 1查看 226关注 0票数 1

我目前正在制作一个D3世界地图,我在其中引入了缩放功能-根据点击可以放大到任何国家或国家的边界。

我已经添加了气泡指向肯尼亚的县,这得到放大的缩放功能,我有added.But我想停止缩放气泡,对地图的缩放。

这是我当前工作的一个插销。

https://plnkr.co/edit/nZIlJxvU74k8Nmtpduzc?p=preview

下面是缩放和缩小的代码

代码语言:javascript
运行
AI代码解释
复制
function clicked(d) {

   var conditionalChange = d;
   if(d.properties.hasOwnProperty("Country")){

       var country = d.properties.Country;
       var obj = data.objects.countries.geometries;
         $.each(obj, function(key, value ) {
            if(countries[key].properties.name == "Kenya")
                {
            conditionalChange = countries[key].geometry;
                        }
            });
   }
  d = conditionalChange;
  if (active.node() === this) return reset();
  active.classed("active", false);
  active = d3.select(this).classed("active", true);

  var bounds = path.bounds(d),
      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 = 1.2/ Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

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

function reset() {
  active.classed("active", false);
  active = d3.select(null);

  g.transition()
      .duration(750)
      .style("stroke-width", "1px")
      .attr("transform", "");
}
EN

回答 1

Stack Overflow用户

发布于 2017-10-24 20:58:59

您正在缩放整个g元素,这将有效地缩放地图。所有内容的大小都会增加;但是,对于地图线,您已经调整了笔划以反映g比例因子的更改:

代码语言:javascript
运行
AI代码解释
复制
 g.transition()
      .duration(750)
      .style("stroke-width", 1/ scale + "px")
      .attr("transform", "translate(" + translate + ")scale(" + scale + ")");

要使圆保持相同的大小,必须对圆进行相同的调整,方法是根据g比例因子修改每个圆的r属性:

代码语言:javascript
运行
AI代码解释
复制
   g.selectAll(".city-circle")
     .transition()
     .attr("r", 5 / scale )
     .duration(750);

但是,由于您实际上并没有在您的circle上应用类city-circle,所以当您附加它们时,您也需要这样做:

.attr("class","city-circle")

而且,就像在重置时重置笔划宽度一样,您需要重置圆的r

代码语言:javascript
运行
AI代码解释
复制
  g.selectAll(".city-circle")
     .transition()
     .attr("r", 5)
     .duration(750);

加在一起就得到了this

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46916743

复制
相关文章
d3成神之路(七):缩放区域的使用
https://github.com/d3/d3-zoom/blob/v3.0.0/README.md#_zoom
拿我格子衫来
2022/01/24
6210
d3成神之路(七):缩放区域的使用
Laya 中缩放的实现
在 Laya 中, Event 是事件类型的集合。包含了常见的鼠标事件、键盘事件。
用户2434869
2019/03/29
1.7K0
在 React 中缩放、裁剪和缩放图像
在本文中,我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储,但是很容易就能完成这个任务。
疯狂的技术宅
2020/02/26
6.4K0
在 React 中缩放、裁剪和缩放图像
echatrs名词解析
chart 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等
Qwe7
2022/06/14
6850
九大数据可视化利器,你有在使用吗?
可视化信息以易于阅读的视觉化内容正在被越来越多的人所青睐。可视化形式呈现信息的需求也随之增加,因此近年来涌现出了许多数据可视化工具。对于不熟悉数据可视化领域的人来说,最好的方法是尝试一些现成的解决方案来快速制作标准化的图表。对于拥有更多技术专长、经验丰富的用户,最好的办法是使用更灵活的库。 下面与大家分享九大数据可视化库,希望你可以找到最适合的一款。
LiveEdu
2018/05/21
3.9K0
九大数据可视化利器,你有在使用吗?
世界地图VR集锦
一、效果图 二、 代码如下 旧金山:海湾篇+城市篇 <iframe src="https://www.720yun.com/t/bdvku9dm589?scene_id=39310506" frame
懿曲折扇情
2022/10/31
4920
win10 uwp 气泡 WPF 气泡
假设尖头宽度 10 高度 5 ,那么可以看到第一个点是 (0,5) 第二个点是 (5,0) 第三个点是 (10,5)
林德熙
2018/09/18
1.5K0
win10 uwp 气泡
            WPF 气泡
D3动画
D3.js提供了多种工具支持数据可视化的交互,其中d3.transition让简单而高效的为图像添加动画成为了可能。
vincentKo
2022/09/19
8960
D3动画
关于Android中App的停止状态
很多人遇到过广播收不到的问题,比如Google Play推广安装广播没有收到等,诸如这些问题,又都是什么原因呢,这篇文章将进行回答.
技术小黑屋
2018/09/04
2K0
全能keynote模板 300页800MB
8512.jpg 模板详细介绍 超过300张独特,干净和现代的幻灯片 两种尺寸规格:16:9宽屏(1920×1080,全高清)3:4标准格式(1920×1440) 两个6色主题和4个单色主题,易于编辑,两种底色:浅色和深色​。​ keynote内手工制作的信息图表,易于编辑,100%的矢量数据图表,支持打印 包括世界部分国家地图:美国,加拿大,德国,中国,俄罗斯,印度,巴西,日本,墨西哥,非洲,亚洲,欧洲,南美,所有国家/地区地图均为矢量形状。可自由缩放,旋转,调整大小,设置动画,更改颜色…… 包括:投资组
PPT爱好者
2020/05/26
2K0
全能keynote模板 300页800MB
画出优雅的气泡图
第一种: 把自己的数据整理成easy_input.txt的格式,就可以跳过“输入数据的格式化”,直接进入“开始画图”。第一列是基因名,后面几列依次是各个sample里motif的pvalue,然后是motif的名字,后面是FPKM值。
生信喵实验柴
2023/09/06
5460
画出优雅的气泡图
聊天气泡
size box会控制panel的大小,Image设置为根据Panel大小适配,最终实现Txt控制背景图的大小。
太阳影的社区
2021/10/15
1.6K0
特征工程中的缩放和编码的方法总结
数据预处理是机器学习生命周期的非常重要的一个部分。特征工程又是数据预处理的一个重要组成, 最常见的特征工程有以下一些方法:
deephub
2022/11/11
1.1K0
特征工程中的缩放和编码的方法总结
D3 介绍
D3.js 是一个基于数据的操作文档的 JavaScript 库,可以让你绑定任何数据到 DOM,支持 DIV 这种图案生成,也支持 SVG 这种图案的生成(如果你对 SVG 不熟悉,请先看一下这篇文章,它介绍了 SVG、VML 和 Canvas)。D3 帮助你屏蔽了浏览器差异,做出来图案的效果可以说是炫目得一塌糊涂,可是代码却很简洁。在我第一次听人介绍 D3 的时候,确实被其示例震撼到了,大量的例子在这里可以找到。
四火
2022/07/15
1.4K0
D3 介绍
Java中停止线程的3种方式
其中 stop 方法为 @Deprecated 修饰的过期方法,也就是不推荐使用的过期方法,因为 stop 方法会直接停止线程,这样就没有给线程足够的时间来处理停止前的保存工作,就会造成数据不完整的问题,因此不建议使用。而自定义中断标识也有一些问题,所以综合来看,interrupt 方法才是最理想的停止线程的方法,接下来我们一起来看它们的具体差异。
磊哥
2022/05/09
8720
Java中停止线程的3种方式
在Swift中创建可缩放的图像视图
没有什么比完美的图片更能让你的应用程序熠熠生辉,但如果你想让你的应用程序用户真正参与并与图片互动呢?也许他们想放大、平移、掌握这些图像?
玖柒的小窝
2021/11/05
5.8K0
[android] 图片的缩放
调用BitmapFactory.decodeResource(res,id)方法,获取Bitmap对象
唯一Chat
2019/09/10
1.6K0
气泡图(bubble)
今天跟大家分享的是气泡图! ▽▼▽ EXCEL制作的气泡图需要三个序列数据,除了通常必须的X轴、Y轴之外,还需要第三列数据,用来指定气泡面积大小。 ●●●●● 三列数据一定要按照先后顺序排列(X轴、Y
数据小磨坊
2018/04/10
3.6K0
气泡图(bubble)
bubble气泡特效
看看人家的气泡效果: 人家直接引入即可,超方便: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script> <script>bubbly();</script> </b
红目香薰
2022/11/29
3K0
bubble气泡特效
小程序中图片高度等比缩放
前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩放的实现。 bindload中处理 ✦✦01✦✦ WXML代码: <view class='main-content' wx:for="{{detail.content}}"> <image src="{{item.img}}" class="img" bindload='imgLoad' style='height: {{item.height
连胜
2018/03/07
4.8K0
小程序中图片高度等比缩放

相似问题

使用D3 + ReactJS缩放世界地图

115

缩放世界地图时的D3弹出窗口大小

17

d3世界地图--缩放时计算地理边界

24

Flex气泡图气泡缩放

10

如何启动和停止D3气泡图的动画

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文