d3设置与ZoomIdentity不同的默认缩放配置
是指在使用d3.js库进行数据可视化时，可以通过设置不同的缩放配置来改变默认的缩放行为。
d3.js是一个强大的JavaScript库，用于创建交互式的数据可视化图表。它提供了丰富的功能和灵活的API，使开发者能够轻松地创建各种类型的图表和可视化效果。
在d3.js中，ZoomIdentity是一个表示当前缩放状态的对象。它包含了当前的缩放比例、平移偏移量等信息。默认情况下，d3.js会根据用户的交互操作自动更新ZoomIdentity对象的属性，从而实现缩放和平移效果。
然而，有时候我们可能希望自定义默认的缩放行为，以满足特定的需求。这时，可以通过设置不同的缩放配置来实现。
在d3.js中，可以使用d3.zoom()方法创建一个缩放行为对象，并通过调用该对象的方法来设置不同的缩放配置。常用的缩放配置包括：
- 缩放范围限制：可以通过调用zoom.scaleExtent()方法设置缩放的最小和最大比例范围，以限制用户的缩放操作。
- 缩放平移限制：可以通过调用zoom.translateExtent()方法设置缩放平移的边界范围，以限制用户的平移操作。
- 缩放插值器：可以通过调用zoom.interpolate()方法设置缩放的插值器，以改变缩放的动画效果。
- 缩放事件监听：可以通过调用zoom.on()方法监听缩放事件，以便在缩放过程中执行自定义的操作。
通过设置不同的缩放配置，可以实现各种不同的缩放效果，从而提供更好的用户体验和交互性。
腾讯云提供了一系列与数据可视化相关的产品和服务，包括云服务器、云数据库、云存储等。其中，腾讯云的云服务器（CVM）提供了高性能的计算资源，可以用于部署和运行d3.js等数据可视化应用；云数据库（CDB）提供了可靠的数据存储和管理服务，可以用于存储和查询可视化所需的数据；云存储（COS）提供了安全可靠的对象存储服务，可以用于存储和管理可视化所需的图片、视频等多媒体资源。
更多关于腾讯云产品和服务的详细介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
就像这里解释的那样：enter link description here我已经在我的图表中添加了缩放行为。 D3启动到K=1、X=0、Y=0的ZoomTransform。
浏览 32提问于2019-09-12得票数 0
我为转换<g>设置的是const g = d3.select('target-g')
g.attr('transform', d3.event.transform)现在，我尝试使用以下示例javascript代码设置<g> svg标记的transfo
浏览 1提问于2019-07-04得票数 1
回答已采纳
d3存储元素的变换状态，并在发生缩放事件时更新它。// My transform state objectmyTransState.y += e.tran
浏览 15提问于2021-06-13得票数 0
回答已采纳
我的d3时间线图是在x轴上显示一些垃圾值(十进制)，而不是显示日期和时间。如下图所示。我发现了造成这种情况的根本原因，这是因为对图表load进行了初始调用。我正在对图表进行缩放变换。如果我删除这一行，它可以正常工作，但我不能删除，因为这是必要的(初始缩放转换应用于默认图表加载- d3.zoomIdentity)。造成问题的代码如下-
var transform =
浏览 0提问于2020-02-11得票数 1
我使用d3行为将一个缩放事件附加到我的SVG上，因此使用鼠标轮，我可以获得一个具有transform和scale的缩放事件，然后使用它来设置元素的transform属性。似乎zoom.scale值在某个地方是持久化的，所以每次使用鼠标轮时，它总是包含正确的缩放值，同时考虑到所有以前的缩放事件。这是很酷的，但我需要一个方法来清除这个值，比如说一个复位缩放</
浏览 6提问于2013-06-19得票数 12
回答已采纳
1回答
下面的代码成功地允许我的画布被平移和缩放。还有一个按钮将重置为原始状态。但是，在我继续在点击按钮后进行平移或缩放之后，它会恢复到按钮被按下之前的翻译/缩放。这是在d3 v7中，我看到了使用d3.behavior.zoom的v3的答案，但我相信它不再是一个属性。似乎在“缩放”事件中存储了一些内部状态--是否有方法将其设置为(x:0，y:0，k:1)？我的代码有缺陷吗？.
/&#x
浏览 4提问于2021-07-15得票数 2
回答已采纳
1回答
注意：(类似于这里的问题，。但是，他们的答案是针对v3的，注释中的v4回答不起作用。) .attr("transform","translate(400,200) scale(.4,.4)");
s
浏览 1提问于2017-09-09得票数 3
回答已采纳
我编写了一个脚本，以图形化的方式显示一些面向行的数据，包括条、标签和行之间的连接。随着数据集的增长，生成的SVG元素已经超出了屏幕的大小。为了将结果保持在一个屏幕上(部分是为了使用户更容易管理d3缩放行为)，我在绘图之前缩放了SVG元素，使其适合屏幕。为此，我在SVG元素中添加了一个transform/scale属性。问题是，d3的behavior.zoom不知道这个比例的</em
浏览 0提问于2011-12-30得票数 12
回答已采纳
我有一棵像这样的“径向蒂迪树”：var width = 1000, .scaleExtent([1 / 2, 4])function zoomed() { "transform", );当我第一次拖动或滚动时， g 元素跳到左上角<em
浏览 2提问于2018-06-05得票数 5
回答已采纳
1回答
当我放大到特定位置的鼠标点击，然后尝试平移或当我使用鼠标轮，变焦行为跳跃。似乎我的缩放级别正在恢复，就像鼠标单击之前的情况一样。下面是我的事件处理程序： var x, y, k;
if (d && centered !+ width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x +
浏览 0提问于2019-04-02得票数 5
回答已采纳
5回答
D3 v4:重置缩放状态
、、、
我有一个可以缩放的SVG，还有一个“重置”按钮。我正在用重置变焦这将按预期工作并重置SVG上的缩放。但是如果我再次放大，它就会回到上一次的状态。例如，我滚动，按下“重置”按钮，然后缩小，->是放大的。如何重置zoom对象的内部缩放状态？尝试了不同的解决方案，但都不起作用。这里是完整的<em
浏览 4提问于2017-08-08得票数 15
1回答
如果单击此示例中的红色按钮：
我试过倒转缩放的顺序，并在缩放定义和zoomToExtent函数中进行转换，但是实际上并没有什么不同。
浏览 0提问于2018-06-24得票数 3
回答已采纳
2回答
翻译后，我试图放大SVG元素，但是当我开始初始缩放时，SVG的位置会重置为0,0。我希望变焦和平移从页面加载的移动位置开始。myMatrix.translate(winCenterH,winCenterV);mainGrid.transform(myMatrix);
gridELement.attr("transform", d3.event.transform);
<&
浏览 1提问于2019-07-19得票数 1
回答已采纳
1回答
我在D3中有一个高度修改的拖拽/滚动盘/缩放的时间线。缩放回调使用由缩放行为生成的d3.event.transform对象。
我需要添加一个使用现有回调的编程缩放。我试过并试图在没有这样做的情况下做到这一点，但是我还没有让它开始工作，重用现有的结构将变得非常容易和更快。因此，输入是一个新域，即[new Date(1800,0), new Date(2000,0)]，并且输出应该是一个新的<
浏览 0提问于2019-04-30得票数 5
1回答
我正试着在我的网络上设置一个初始变焦。它工作的很好，但一旦我尝试手动缩放的图形，可视化跳转到它的自然缩放设置。阅读Stack上的答案和d3的官方文档，下面的代码在我看来是正确的，但它并没有解决这个问题。 svg.attr(&q
浏览 2提问于2020-08-22得票数 0
回答已采纳
我是一个全新的D3新手，正在阅读关于如何设置当前缩放转换的内容，但我在理解我做错了什么时遇到了麻烦。我使用以下代码行在页面上初始居中放置一个圆圈。g.call(zoom.transform, d3.zoomIdentity.translate(width / 2, height / 2).scale(2));
也许我使用了不正确<
浏览 7提问于2017-02-28得票数 0
回答已采纳
1回答
我试图将一些D3代码(v4)与reactjs集成在一起。 .duration(750) if (d3.event.defaultPrevented) d3.event.stopPropagation();
浏览 1提问于2017-08-24得票数 2
1回答
我有一个使用d3.xml导入的SVG，当我单击SVG中的一个椭圆时，我正在尝试放大。这几乎可以工作，尽管我缺少一些在SVG大小改变时定位元素的功能。下面是我用来缩放的代码： svg.transition().duration(750).call( d3.zoomIdentity
.translated3.select(this).attr('cx'), -d3.select(this).attr('
浏览 21提问于2021-09-30得票数 0
回答已采纳
我正在使用D3.jsV4.0在SVG中提供缩放和摇摄。我正在实现一个复位按钮，以使我回到图像的中心。它正在工作，但它使用的是默认的d3。内插缩放，因此图像在过渡期间会缩放。我只想要缩放做标准的插值，但我不知道如何改变内插器的缩放行为。{ .transition() .call(zoo
浏览 3提问于2016-10-12得票数 2
回答已采纳
我正在开发一个使用ReactJS的网络应用程序。我在React组件中有一个使用D3呈现的世界地图。但是，我希望用户能够通过滚动鼠标轮来缩放自定义的数量，但是我不知道如何做到这一点。当我在网上搜索时，我偶然发现了d3的缩放功能，但是例子都是通过调整比例来完成的，但我不知道如何将它应用到d3-geo上，它似乎没有缩放，但只有投影。<svg id="geo-chart" ref={svgRef}&
浏览 6提问于2020-06-06得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
