个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我使用 D3.js 实现了缩放树形图。树状图可以缩放和平移我限制了缩放功能，但无法限制 map 的平移。我希望平移仅在 map 内部而不是在 map 外部。
这是我的树状图的当前工作实现:http://www.advbizclan.com/treemapt/
我想要它就像缩放功能一样，仅限于 map ，平移也应该仅限于 map 。
最佳答案
你的 fiddle 的问题是 LoadType是不正确的。要解决此问题，只需单击 Javascript Javascript 窗口顶部的按钮，然后选择 No wrap- in <body>在 LOAD TYPE .
至于你的问题。这相当简单。目前，您可以使用它来平移和缩放树形图:
.call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", function() {
console.log(d3.event.translate)
chart.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
这使用 d3.event.translate翻译您的svg 。但您只想平移 y方向是？如d3.event.translate返回 x 和 y 坐标的数组，翻译需要一个 x 和 y 坐标来平移，只需为 x 和 d3.event.translate[1] 传递 0 (即 y 坐标)像这样翻译:
.on("zoom", function() {
chart.attr("transform", function(d) {
console.log(d3.event.translate);
return "translate(" + [0, d3.event.translate[1]] + ")" + " scale(" + d3.event.scale + ")"
})
}))
现在就到此为止吧。您需要为此添加限制，对于我的示例，我刚刚完成了此操作(您可以轻松实现自己的限制):
if(d3.event.translate[1] > 0 && d3.event.translate[1] < chartHeight/2 ){
console.log('move')
return "translate(" + [0, d3.event.translate[1]] + ")" + " scale(" + d3.event.scale + ")";
}
在这里，你不能向上拖动 map ，但可以向下拖动一半。
更新了 fiddle :https://jsfiddle.net/thatoneguy/w7em39wj/
关于javascript - 限制 D3 树形图平移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36688849/
25
4
0
我正在尝试基于此示例实现 highcharts 平移: http://jsfiddle.net/HXUmK/5/ 但我希望能够用鼠标左键缩放并用鼠标右键平移。所以我修改了上面的代码并设法让它工作了一点
如何删除 BufferedImage 最左边垂直列的 50px，并将其复制到与原始 BufferedImage 大小相同的新 BufferedImage 中？ class TestCopyImage
以下是关于如何绘制机器人的 ARM 和肩膀并通过一些用户输入旋转它们的代码(取自 http://www.glprogramming.com/red/chapter03.html ): glPushMa
我正在使用 Swift/SpriteKit 并在 SKScene 上创建了 map 的宽图像。我正在用代码完成这一切，并希望让用户拖动手指来平移这张超宽的 map 。可以将其想象为幻想世界的老式 RP
我正在将 opencv 与 C 一起使用，我正在尝试获取 2 个摄像头之间的外部参数(旋转和平移)。 有人告诉我可以使用棋盘格图案进行校准，但我找不到任何好的样本。我该怎么做？ 编辑 给出的建议是用棋
我正在尝试在 android 图库小部件中缩放/平移图像。图像覆盖整个屏幕。虽然我可以缩放/平移图库中的图像，但我无法滑动到下一张/上一张图像。单个图像的缩放和平移效果很好。 我从 Hello And
当允许平移时，所有鼠标事件上的 JavaFX ScrollPane Pane : scrollPane.setPannable(true); 如何限制 ScrollPane 仅在鼠标中间事件上平移，
我一直试图弄清楚如何在 paperjs 中使用 onMouseDrag 和 onMouseDown 进行平移/缩放。 我看到的唯一引用是在 coffescript 中，并且不使用 paperjs 工具
我正在使用 d3 来渲染简化的甘特图，并使用 d3.behavior.zoom 进行平移和缩放。 x 比例是一个时间比例(稍微修改为以列为中心的日历天等)并且工作得很好，但是我在决定如何缩放/平移 y
我已经使用关键帧为HTML/CSS3创建了动画。 动画是一个图标，该图标应该围绕其中心点旋转和缩放。 该动画可在Chrome中运行，但在Safari中，直到动画结束，它才能正确转换。 这是-定位到 s
我有一个在登录事件后调用的 TranslationService，在这个服务中我想初始化 $translateProvider.translation 但这个对象似乎无法在 app.config(..
滚动和平移有什么区别？ 平移是否被识别为拖动图像/背景的 Action ，而滚动仅在您使用滚动条时？ 而且，拖动和平移有什么区别？ 当我拖动google maps的 map 时，哪个术语合适，拖动还是
当用户按下鼠标并移动它时，我试图平移 Canvas ，但由于某种我看不到的原因，它似乎不起作用。有什么想法吗？ canvas.addEventListener('mousedown', onM
我正在拼命寻找一种用 Pyglet 控制声音(左右)平衡的方法。 我知道 3D 定位系统，但我真正想要的只是控制平移(类似于 -1:left 1:right)，而 3D 系统在这种情况下会适得其反(
考虑以下两组点。我想找到最佳的 2D 平移和旋转，以对齐数据集蓝色和数据集橙色之间的最大数量的点，如果到另一个数据集中最近邻居的距离小于阈值，则认为该点对齐。 我知道这与“迭代最近点”算法有关，但在这
我正在尝试包含 @bumbeishvili 的 Convex Hull 实现( https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54fe
我正在尝试在平移和缩放时使可缩放/拖动矩形不超出 svg 边界。我尝试基于此 example 来实现它，但我似乎无法让它工作。我创建了 this jsfiddle只有可缩放和可拖动的矩形。再一次，我试
UIScrollView 有一个内置的行为“directionLockEnabled”。 启用后，平移将尝试锁定到水平或垂直方向。但是当用户积极尝试对角滚动时 - 它仍然允许对角滚动。 我想删除对角滚
我正在编写一个 GUI，它将执行一些图形平移/旋转等操作。 我的问题是，当我尝试翻译我的图形时， (a) 整个屏幕都会平移，而不是我的一小块绘制区域 (b) 旧油漆留在那里，留下一个大油漆 Blob
我最近一直在做一个项目，作为我的作业。 好吧，言归正传，我有一个 Scene2D 的 Screen 实现，我遇到的问题是我在小部件上的触摸事件不会在小部件上停止。 我的意思是，如果我弹出一个窗口，并尝
我是一名优秀的程序员,十分优秀！