Question

我有一个可缩放的SVG区域，其中有一些对象按照预期响应d3.js＆＃39;缩放行为（即鼠标滚轮）。现在我尝试将jQueryUI滑块附加到我的应用程序以便遵循这些行为。

例如，如果发生mousewheel缩放事件，则slider应相应移动。另一方面，如果更改zoom，则应出现slider。

现在我有点失落，因为小工具＆＃39;幻灯片事件显然没有d3的缩放行为translate和scale参数传递。

我已经看到一个HTML5滑块（here）的示例与我需要的类似，但我无法使用my version来处理它。

任何线索/想法？

:)奖励积分＆gt;＆gt;＆gt;

我还需要隐藏/剪辑圆圈边界以外的点（它们真的只是文字）。
无论如何，我可以通过缩放将点移动到他们的位置（就像现在一样），但不缩放它们？
另外，为了让它在开始时完全放大，我还需要改变什么？

修改

所以，我管理过最棘手的部分（检查here），但现在我仍然试图让文字不能缩放，并将文字剪辑到圆圈之外＆＃39;的边界。有什么想法吗？

Answer 1

现在我有点失落，因为小部件'滑动事件显然没有d3的缩放行为的翻译和缩放参数传递。

对于此特定问题，当您使用滑块进行缩放时，应将滑块值用作scale，并且可以将translate提供给svg画布中心的坐标。

zoom event中的

d3.event.translate只是放大缩放处的坐标。

另外，为了让它完全缩放，我还需要改变什么在一开始？

只需将页面开始scale设置为最大缩放值即可。例如，translate到您商品的中心。

编辑：

我还需要隐藏/剪辑点（它们实际上只是文本）圆圈的边界。

我发现你已经在使用clipPath，但它无效。这是因为您还要对<g>元素应用变换，这会影响剪辑路径。

最简单的解决方案是为clipPath创建一个顶级<g>元素，然后将包含您商品的<g>连接到顶部。

更正后的代码：

var topg = svg.append("g")
              .attr("clip-path","url(#clip)");

var clip = topg.append("defs").append("svg:clipPath")
               .attr("id", "clip")
               .append("svg:circle")
               //.attr("id", "clip-circ")// You had a typo here
               .attr("cx", centerx)
               .attr("cy", centery)
               .attr("r", 149);


var pointsGroup = topg.append("g")
                  .attr("id", "pointsGroup")
                  //.attr("clip-path", "url(#clip)");// no longer needed here

在jquery.UI幻灯片事件

1 个答案: