开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

滚动上的d3缩放在Chrome上不再起作用

滚动上的D3缩放在Chrome上不再起作用可能是由于浏览器的兼容性问题或者是D3.js库的更新导致的。以下是一些基础概念、可能的原因以及解决方案：

基础概念

D3.js（Data-Driven Documents）是一个JavaScript库，用于使用数据来操作文档。它允许开发者绑定任意数据到DOM，并使用数据驱动的方法来操作文档。D3的缩放行为通常是通过d3.zoom()函数实现的，它可以创建一个缩放变换，允许用户通过鼠标滚轮或触摸手势来缩放视图。

可能的原因

浏览器更新：Chrome浏览器的更新可能会改变其对某些JavaScript API的支持，导致D3的缩放功能失效。
D3版本不兼容：如果你使用的D3.js版本与当前的Chrome浏览器版本不兼容，可能会出现问题。
事件监听器问题：可能是因为事件监听器没有正确设置，或者在Chrome中某些事件的行为发生了变化。
CSS样式冲突：页面上的CSS样式可能会影响D3的缩放行为。

解决方案

检查D3版本：确保你使用的D3.js版本是最新的，或者至少是与当前Chrome浏览器兼容的版本。你可以访问D3.js的官方网站下载最新版本：D3.js GitHub
更新事件监听器：确保你的缩放行为是通过正确的事件监听器设置的。例如：
更新事件监听器：确保你的缩放行为是通过正确的事件监听器设置的。例如：
检查CSS样式：确保没有CSS样式阻止了缩放行为。例如，确保没有设置overflow: hidden在SVG元素或其父元素上。
使用Polyfill：如果问题是由于浏览器的某些新特性导致的，可以尝试使用polyfill来解决兼容性问题。例如，可以使用d3-dispatch来处理事件。
调试和日志：在Chrome的开发者工具中打开控制台，查看是否有任何错误信息。这可以帮助你定位问题的根源。

应用场景

D3.js的缩放功能广泛应用于数据可视化项目，如地图、图表和图形等，它允许用户通过交互来探索数据的细节。

示例代码

以下是一个简单的D3.js缩放示例，展示了如何在SVG元素上实现缩放功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Zoom Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <svg width="960" height="500"></svg>
    <script>
        const svg = d3.select("svg");
        const zoom = d3.zoom()
            .scaleExtent([0.5, 5])
            .on("zoom", (event) => {
                svg.attr("transform", event.transform);
            });

        svg.call(zoom);

        // 添加一个简单的矩形用于测试缩放
        svg.append("rect")
            .attr("width", 100)
            .attr("height", 100)
            .attr("fill", "steelblue");
    </script>
</body>
</html>

参考链接

通过以上步骤，你应该能够诊断并解决D3.js在Chrome上缩放失效的问题。如果问题仍然存在，可能需要进一步检查具体的代码实现或者寻求社区的帮助。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Knative Serving flowchart

之前的一篇文章 Knative getting-started 介绍了 Knative Serving 的两个最主要的功能，版本流量控制和自动扩缩容（可以将pod缩容到0以及冷启动是Knative扩缩容最大的特性...缩容到 0 的场景缩容到零过程的工作流程如下： AutoScaler 通过 queue-proxy 获取 revision 实例的请求指标一旦系统中某个 revision 不再接收到请求（此时 Activator...serve 模式，流量会直接到导到 revision 对应的 pod上。...健康检查通过后，Activator 会将之前缓存的请求转发到健康的实例上。最终 revison 完成了冷启动（从零扩容）。...跟 queue-proxy 不同，Activator 是通过 websocket 主动上报指标给 Autoscaler，这种设计当然是为了应用实例尽可能快的冷启动。

5172 0

移动端浏览器和微信浏览器上禁止body的滚动条

但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用，然后我分析了我的写法，就是在body上加了一个class去定义属性，然后改成标签的定位，如body{overflow:hidden;}，这个实现是可以的...; position: fixed; } 这个就是完全的禁止上下滑动，没有滚动条，且在iOS的safari浏览器上完全不能上下滚，但是确发现微信浏览器上可以上下缩动（下面再解决）。...我最后发现，上面这种解决是普遍的浏览器做法，如果要更彻底一点，就直接使用js代码去控制touchmove的事件，直接精致，这个在微信和手机浏览器上完成可行。...参考：http://www.cnblogs.com/lbcheng/p/6044303.html 经过上面的设置，如果用户在微信浏览器上不能滚动，但是跳出到了iOS的safari浏览器之后，会有很多变数...，比如高度不够，这时滚动也会好一些，那么我这样设置：1、如果在微信上，默认禁止滚动，并且连默认的上下缩滑都不能。

3K1 0

敏捷开发与 DevOps 实战【含源码】

，不再需要招聘不会编程的普通运维了，所以运维的岗位数量越来越少，难就业。...而开发人员会配云服务器是必备技能，学计算机的同学请注意。 DevOps DevOps 自动上线的原理把一个网站部署到服务器分为几步？答：3步。...[ak10rkfjtv.jpg] 这个网站很简单，就是一个 markdown 文档，Git 提交流程和上一篇实战一样，就不再赘述。...注册 coding.net，创建一个 Git 仓库，提交代码；创建一个私钥放在 CODING，把公钥放在服务器的 .ssh/authorized_keys，实现 SSH 信任，参考文档：《在持续集成中使用凭据...然后 Chrome 又显示了 www。到了2019年8月，Chrome 76 再次隐藏 www。理念很简单：技术应该迁就用户，而不是迁就那些落后的网站。www 没有意义，去掉让用户更方便更环保。

2.3K9 1

VFP调用Selenium入门篇（一）

我们可以理解在VFP上可以控制这些浏览器，去为了我们网页任务工作。比2016年进步了太多。稳定性和操控性都变好了。...的版本一定要与Chrome的版本一致，不然就不起作用。...你首先需要查看你的Chrome版本，在浏览器中输入chrome://version/ 或者点击关于。...然后我们去下载：https://npm.taobao.org/mirrors/chromedriver/，我下载了52版本相似直接下载就可以，解压下来是exe文件，解压下来后，将这个exe文件放在你的代码调用的...当你不再需要V3时，用管理员权限运行这个bat，可以从注册表中移除写入的内容。相当于软件的卸载。

2K3 0

kubernetes(九) kubernetes控制器

kubernetes控制器 kubernetes部署应用的流程 pod和controller控制器的关系 controllers：在集群上管理和运行容器的对象 pod和controller通过label-selector...关联 Pod通过控制器实现应用的运维，例如伸缩，升级等 deployment 控制器功能：用于部署无状态应用管理POD和Replicaset 具有上线部署，副本设定，滚动升级，回滚等功能提供声明式更新...containerPort: 80 $ kubectl apply -f deployment.yml $ kubectl get deploy -n prod -o wide 被控制对象是放在...$ kubectl scale deployment web --replicas=10 #扩容 $ kubectl scale deployment web --replicas=1 #缩容...daemonSet 功能在每一个node上运行一个POD 新加入的node也会自动运行一个POD 引用场景： Agent Job 分类普通Job 定时任务特点：一次性执行应用场景：离线数据处理

5062 1

JDBC 到 ORM 的事务实现

，调用的实际上是goodsService的代理对象 ?...如果封装事务不存在,则同propagation. required的一样事务失效的几个原因: spring的事务注解@Transactional只能放在public修饰的方法上才起作用，如果放在其他非...public（private，protected）方法上，虽然不报错，但是事务不起作用如果采用spring+springmvc，则context:component-scan重复扫描问题可能会引起事务失败...所以把对service的扫描放在spring配置文件中或是其他配置文件中。...的配置里，事务也是不起作用的。

6691 0

全局事务服务 GTS 与 Seata 融合的开始

5、TC 调度 XID 下管辖的全部分支事务完成提交或回滚请求。事务模型和模式基于架构上定义的 3 个角色，Seata 把分布式事务抽象成这样一个模型。 ? TM 定义全局事务的边界。...分支注册成功后，把业务数据的更新和 UNDO LOG 放在同一个本地事务中提交。完成阶段：全局提交，收到 TC 的分支提交请求，异步删除相应分支的 UNDO LOG。...从上面示例可以看到：GTS 实际上是把分布式事务（或者说分布式场景下的数据一致性）能力，作为一种云原生的服务，提供给生长在云上的应用，让分布式事务不再成为业务要面临的一个令人头疼的问题，而成为一种可以弹性伸缩...的人力资源成本跟进 Seata 版本，升级 Seata TC Server 的研发、测试成本 3、另外，GTS 给 Seata 应用提供更多增值服务能力：按量付费：不使用不产生任何费用自动扩容缩容...：服务能力的扩容和缩容透明化监控分析：控制台提供事务数据的统计、监视、异常事务控制、链路分析等企业级功能特性发展路线图 ---- 开源项目 Seata 和商业产品 GTS 正在并行向前演进： 1、Seata

1.5K3 1

DNS预解析详解

DNS Prefetching简介 DNS 请求需要的带宽非常小，但是延迟却有点高，这点在手机网络上特别明显。DNS预解析能让延迟明显减少一些，例如用户点击链接时。在某些情况下，延迟能减少一秒钟。...chrome使用8个线程专门做DNS Prefetching，而且chrome本身不做dns记录的cache，是直接从操作系统读dns。...但是在HTTPS下面不起作用，需要meta来强制开启功能。这个限制的原因是防止窃听者根据DNS Prefetching推断显示在HTTPS页面中超链接的主机名。...chrome://histograms/DNS.PrefetchQueue：查看队列状态 chrome://histograms/DNS：查看从浏览器启动到上一页的DNS记录 chrome://dns...所以Chrome会对a标签的domain进行预解析。

26.8K4 0

单屏页面响应式适配玩法

把公共的页头、页脚、导航栏、边框放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。...因为高度变矮，内容的尺寸会随之变小，而页面是 1190 宽，水平居中布局，所以当只改变浏览器宽度的情况下，不会出现宽度变化溢出问题（除非分辨率超大，然后高度居很高，只把宽度缩很小的情况，这个下面会说到）...看看效果（当然这个是最终效果，只改变宽度的拉伸适配在最后会说）： 8、特殊场景这里就是刚刚说到的分辨率超大，然后高度居很高，只把宽度缩很小的情况，因为设计稿是长宽比例为横向矩形，所以明显与用长宽比为竖向的矩形来看页面是背道而驰的...根字体小于 12px 以后，rem 对应的值则都是设置的倍数乘以 12；设置根字体为 vh, vw 单位同理，rem 会在 vh, vw 换算达到 12 以后就不再改变。...9、移动端移动端用户是没法操作浏览器的，所以基本上都是标准的长宽比，用 vh 最合适不过了，或 vw。

2K2 0

单核QPS提升10倍，亿级日调用！QQ频道前端网关升级之路

这时需要马上做两件事：扩大 connection pool；对 pod 缩容，扩容反而会提高失败率；治根（解决办法）扩大 connection pool、缩容 pod 后，需要尽快找到流量上涨的原因...step 2: 确定发布步骤根据变更及变更的依赖项确定发布次序。同时确定回滚次序（微服务发布必须）；按发布次序和回滚次序，列出每一步的操作。...WebSocket 本质上是一个传输层协议，在实际应用中还需处理心跳、重连、降级等机制，因此我们需要一个基于 WebSocket 的应用层协议。...5.1 背景在升级了 tRPC 基础库的第二天，开始出现： pskey invalid 比例上升，略微下降后再上升；服务整体平均耗时也表现类似规律，波动上升和下降；（服务整体平均耗时）服务整体平均耗时...打开 chrome；在 chrome 输入 chrome://inspect 打开 Node DevTools; (...略掉大量无借鉴意义的试验细节) 最终在 memory 的快照中发现了端倪：

5811 1

CapitalOne - Artifactory高可用集群的自动化部署实践

1 流量切换到DR区域 2 缩容现有集群，减少节点数量并释放license给新的集群使用，Aritfactory集群采用多主架构在所容时不会影响剩余节点的正常工作 3 新部署集群复用原油的数据库与s3...回滚策略流水线 10.png Capital One设计了两个回滚策略： 1 In-region回滚。当部署后的测试失败时，马上启动自动化回滚，删除新的集群，并恢复旧的集群。 2 DR容错回滚。...目前由于数据库的回滚可能会有DataBase schema的变化，Capital One目前在数据库回滚操作上依然使用手动方式完成。...自动化流水线部署带来的收益 11.png Capital One通过自动化流水线部署Artifactory HA为团队带来的收益： *加快部署进度并且使开发人员能更专注于代码开发本身，不再需要花费时间维护制品管理的工具...*Capital One更好的扩展性，整个集群的扩缩容都可以由流水线完成 *全面的测试流程确保用户体验 *自动化回滚策略，加快故障检测和响应，减少对生产业务影响

9700 0

最佳案例 | 游戏知几 AI 助手的云原生容器化之路

通过云上的容器化部署、自动扩缩容、健康检查、可观测性等手段，提高了知几项目的持续交付能力和稳定性，形成了一套适合游戏知几自身的上云实践方案。...IDC机器的后台服务上；服务的 CI/CD 通过夸克平台操作，完成服务的编译、打包、发布等操作，也支持操作回滚，进程监控等；监控告警、日志系统接入的是mo监控平台和骏鹰。...和CAP 四类公网 CLB；先灰度 CAP 小运营商流量，服务稳定后再通过 gslb 逐步灰度其他运营商；回滚则通过 gslb 快速切换回 IDC 服务的VIP；内网服务的迁移则通过 STKE 支持的北极星...富容器的模式是把所有的进程都放在一个容器内，这样看似方便，能实现业务的无缝平滑的快速上云，但无论从未来的维护效率、安全还是健康检查、服务弹性上看都有问题，是中间态，违反了容器单一功能原则，也不符合云原生的理念...Monitor 上报需要通过 http 请求获取上报的 ip 再将数据通过 tcp 形式发送到 Monitor 侧，这种形式的上报对业务并不友好，Monitor 当前也已不再接入新的业务，目前知几正逐步将

1.5K2 0

「走进k8s」Kubernetes1.15.1的Pod 自动扩缩容（23）

上次说了deployment，它也是kubernetes的核心概念，主要职责和RC一样就是为了保证pod的数量和健康，除了RC有的功能，它自带的光环属性查看事件和状态，还支持回滚，回滚到任意的版本，相对于...前面说过可以通过--replicas的方式来扩缩容，或者是通过dashboard的方式界面化的扩缩容。...Metrics Server 从每个节点上的 Kubelet 公开的 Summary API 中采集指标信息。在了解Metrics-Server之前，必须要事先了解下Metrics API的概念。...因为存放在内存中，因此监控数据是没有持久化的，可以通过第三方存储来拓展，这个和heapster是一致的。...gcr.io 免费代理下载被墙的镜像；下面部署命令均在k8s-master01节点上执行。

2.8K2 1

Alfred 有多强悍，我写了个一键上传图片的 workflow 来告诉你

那么该怎么解决呢，有两种方式一种是找到那些粘贴图片后可以自动上传图床并且生成的图片链接没有防盗链的平台，如 mdnice.com，不过我试了一下 mdnice.com,貌似有 bug，Chrome...和 Safari 上粘贴图片后自动上传图片不起作用，360浏览器倒是可以。...考虑之后我决定自己整一个自动上传到图床的工具，无它，自己实现比较 Cool，怎么做呢，一般本地图片要转成最终的图床链接有以下两步剪切或者复制图片将图片上传到云端，上传成功后会返回云端的图片链接我希望这个工具能达到如下流程图所示的效果...一键上传图片 workflow 实现思路上节可知 workflow 确实强大，所以用它来实现我们的自动上传图片到图床的功能再合适不过了。...从此以后，如果我想截图并且获取此图片的链接即可一键搞定！再也不要机械的手动上传图片了！是不是很 Cool!

1.3K1 0

宝贝，来，讲讲 Spring 事务有哪些坑?

Spring 事务控制放在 Service 层，在 Service 方法中一个方法调用 Service 中的另一个方法，默认开启几个事务 6. 怎么保证 Spring 事务内的连接唯一性 7....主要内容如下： Spring 事务的原理； Spring 什么情况下进行事务回滚； Spring 事务什么时候失效； Spring 事务和数据库事务隔离是不是同一个概念； Spring 事务控制放在 Service...我们知道 Spring 事务的原理是 AOP，进行了切面增强，那么失效的根本原因是这个 AOP 不起作用了。...如果是其他异常想要回滚，需要在 @Transactional 注解上加 rollbackFor 属性。又或者是异常被吞了，事务也会失效，这里不再赘述。...Spring 事务控制放在 Service 层，在 Service 方法中一个方法调用 Service 中的另一个方法，默认开启几个事务此题考查的是 Spring 的事务传播行为。

4482 0

虽然SHA-1遭遇碰撞攻击，但“天还没塌”

虽然这个问题是发生在WebKit SVN上的，但它能影响全世界的版本控制系统。...WebKit SVN接收到上传的两份文件后立即出错并且不再接受任何新的代码推送。无论是回滚还是删除PDF文件都不起作用，SVN repo仍然无法使用，与镜像repo的同步也中止了。...事实上SHA-1遭遇碰撞攻击后，人们就担心，使用SHA-1校验的代码仓库Git会不会存在被攻击的问题。...早在2014年，Chrome浏览器就不再推荐SHA-1算法的浏览器证书，微软Edge浏览器、Firefox浏览器都在计划逐步淘汰SHA-1算法。...碰撞攻击的第一阶段花费740万美元，这还是假设CPU开足马力每时每刻在亚马逊上运行的情况，因此能够利用这个漏洞的人只可能是资源丰富的罪犯或者国家资助的黑客。

1.5K6 0

腾讯游戏打通 Apache Pulsar 与 Envoy，构建高效 OTO 营销平台

上述架构分为两大部分，分别为 Kafka + Flink 的大数据处理套件，和以微服务方式部署在 K8s 上的微服务开发平台。后者是以云原生理念搭建的开发平台，方便开发和运维。...OTO 服务通过基于 Kubernetes 的 GDP（游戏微服务开发平台），可以快速部署、自动扩缩容和资源回收复用。...事件元数据管理登记各业务的各种类型事件应存放在 Pulsar 的哪个租户的哪个 Topic 下，由事件网关负责路由。...Pulsar 延迟消息的其他应用定时任务：可以实现在某个时间给特定用户发送通知；定时活动上下线和物品上架等。...我们计划扩展 K8s 的 HPA，在监控 CPU 和内存等指标基础上再监控 msgBacklog，增强扩缩容灵活性，防止消息堆积。

8223 0

制作一个简单的chrome扩展

最好的解决方式,就是用js编写程序,直接放到对方的浏览器里运行,毕竟也没有那个浏览器不支持js,如果对方安装了chrome内核的浏览器,你可以直接把程序改成chrome扩展,打包发给对方,问题也就很轻松的完美解决了...想做到这些,你得先知道chrome的扩展的开发流程是什么! ? chrome商店我们要做这样一个小玩意儿: ? 动图_效果演示什么是扩展: 可以简单把扩展理解为浏览器的插件...., // 定义扩展的版本 "version": "1.0", // 定义扩展的描述 "description": "解决吃什么的难题,从此不再纠结'吃什么'......完整的资源文件也放在了文末网盘链接里,需要的可以自取... 装载主程序: 1. 打开chrome浏览器,在地址栏键入chrome://extentions,回车 ?...= the_menu; // 更新按钮显示的文字,只是第一次起作用 btn.innerHTML = "换一个"; }) }; 教程涉及到的资源我都通过百度网盘分享给大家

1.2K13 0

Flume 之 memory channel

4.4 回滚事务当一个事务失败时，会进行回滚，即调用本方法。在回滚时，需要把takeList中暂存的事件回滚到Channel Queue，并回滚queueStored信号量。...return; } else if (oldCapacity > capacity) { //缩容 //首先要预占老容量-新容量的大小，以便缩容容量...6.2.2 管道容量一旦管道中所有Flume Agent的容量之和被使用完，Flume 将不再接受来自客户端的数据。此时，客户端需要缓冲数据，否则数据可能会丢失。...此时Source不再写入数据，造成未写入的数据丢失；就是本文的情况； Flume进程挂掉，数据也会丢失，因为之前数据在内存中；所以如果想要不丢失数据，需要采用File channel。...即使JVM 或机器重新启动，File Channel 也不丢失数据，只要磁盘上存储的数据仍然是起作用的和可访问的。

8392 0

【快学springboot】9.使用 @Transactional 注解配置事务管理

介绍 springboot对数据库事务的使用非常的方便，只需要在方法上添加@Transactional注解即可。Spring 为事务管理提供了丰富的功能支持。...image.png 执行结果是预期的报错了。 image.png 数据库也没有jappyjava1这个字段。说明Transactional注解起作用了。...Transactional注解通过noRollbackFor配置不回滚的异常 Transactional注解可以配置发生某个异常时不进行回滚。...比如我在Transaction注解上添加如下属性，指定ArithmeticException不进行事务的回滚。...数据库事务，是一个很复杂的东西，如果要讲清楚，就不应该放在一篇springboot相关的文章中进行讲解，后续会再起篇幅，单独讲讲事务相关的东西。

2.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭